|
|
|
|
@ -1,17 +1,25 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="box">
|
|
|
|
|
<div class="box-title">视频巡航</div>
|
|
|
|
|
<div class="box-container">
|
|
|
|
|
<div class="leida" v-if="!list.length">
|
|
|
|
|
<div class="tangjialing" ></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="box-container" v-if="list.length">
|
|
|
|
|
<!-- 没有无人机提示 -->
|
|
|
|
|
<div class="video-container"></div>
|
|
|
|
|
<div class="video-container">
|
|
|
|
|
<video id="player-container-id" width="235px" height="178px" autoplay preload="auto" playsinline
|
|
|
|
|
webkit-playsinline>
|
|
|
|
|
</video>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="none-uav">
|
|
|
|
|
<div class="uav-item" v-for="(item,index) in list" :key="index">
|
|
|
|
|
<div class="uav-item" v-for="(item,index) in list" :key="index" @click="flyToPoint([item.lng,item.lat]);playerVideo(item.account)">
|
|
|
|
|
<p>
|
|
|
|
|
<img src="/img/uav-icon.png" style="width:22px;margin-right:10px;" alt="">
|
|
|
|
|
<span style="font-size:14px;line-height:30px;">Air 2 UAV</span>
|
|
|
|
|
<span style="font-size:14px;line-height:30px;">{{item.model}}</span>
|
|
|
|
|
</p>
|
|
|
|
|
<p>17861857725</p>
|
|
|
|
|
<p>{{item.account}}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -21,25 +29,104 @@
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
name: 'uavbox',
|
|
|
|
|
props:['globalmap'],
|
|
|
|
|
data(){
|
|
|
|
|
return {
|
|
|
|
|
list:[
|
|
|
|
|
{
|
|
|
|
|
name:"Air Pont 2",
|
|
|
|
|
phone:"17861857726"
|
|
|
|
|
},{
|
|
|
|
|
name:"Air Pont 2",
|
|
|
|
|
phone:"17861857726"
|
|
|
|
|
},{
|
|
|
|
|
name:"Air Pont 2",
|
|
|
|
|
phone:"17861857726"
|
|
|
|
|
},{
|
|
|
|
|
name:"Air Pont 2",
|
|
|
|
|
phone:"17861857726"
|
|
|
|
|
// {
|
|
|
|
|
// "account":"13280580815",
|
|
|
|
|
// "createtime":"2023-03-23 15:44:38",
|
|
|
|
|
// "height":0.5,
|
|
|
|
|
// "ip":"192.168.10.101",
|
|
|
|
|
// "lat":34.999998687396594,
|
|
|
|
|
// "lng":117.95890203784971,
|
|
|
|
|
// "model":"Mavic Air 2"
|
|
|
|
|
// },{
|
|
|
|
|
// "account":"17861857725",
|
|
|
|
|
// "createtime":"2023-03-23 15:44:38",
|
|
|
|
|
// "height":0.5,
|
|
|
|
|
// "ip":"192.168.10.101",
|
|
|
|
|
// "lat":35.19998687396594,
|
|
|
|
|
// "lng":117.95890203784971,
|
|
|
|
|
// "model":"Air Two"
|
|
|
|
|
// }
|
|
|
|
|
],
|
|
|
|
|
player:null,
|
|
|
|
|
uavGraphicLayer:null,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
watch:{
|
|
|
|
|
globalmap:function(e){
|
|
|
|
|
if(e){
|
|
|
|
|
this.drawUavPoint();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted(){
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
methods:{
|
|
|
|
|
flyToPoint(lngLat){
|
|
|
|
|
try{
|
|
|
|
|
this.globalmap.flyToPoint(lngLat, { radius: 1200, "pitch": -90 });
|
|
|
|
|
}catch(e){
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
drawUavPoint(){
|
|
|
|
|
if(this.uavGraphicLayer){
|
|
|
|
|
this.uavGraphicLayer.clear();
|
|
|
|
|
}else{
|
|
|
|
|
this.uavGraphicLayer = new this.mars3d.layer.GraphicLayer({ id: 99999119 });;
|
|
|
|
|
this.globalmap.addLayer(this.uavGraphicLayer)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.list.forEach((item,index)=>{
|
|
|
|
|
let graphic = new mars3d.graphic.ModelEntity({
|
|
|
|
|
name: "无人机",
|
|
|
|
|
position: [parseFloat(item.lng),parseFloat(item.lat), 256.58],
|
|
|
|
|
style: {
|
|
|
|
|
url: "//data.mars3d.cn/gltf/mars/wrj.glb",
|
|
|
|
|
scale: 0.1,
|
|
|
|
|
minimumPixelSize: 50,
|
|
|
|
|
silhouette: false,
|
|
|
|
|
label: {
|
|
|
|
|
text: item.model,
|
|
|
|
|
font_size: 14,
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
pixelOffsetY: -50,
|
|
|
|
|
distanceDisplayCondition: true,
|
|
|
|
|
distanceDisplayCondition_far: 10000,
|
|
|
|
|
distanceDisplayCondition_near: 0
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
|
|
|
|
|
highlight: {
|
|
|
|
|
label: {
|
|
|
|
|
font_size: 30
|
|
|
|
|
},
|
|
|
|
|
silhouette: true,
|
|
|
|
|
silhouetteColor: "#ff0000",
|
|
|
|
|
silhouetteSize: 4
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
attr: { remark: "示例3" }
|
|
|
|
|
})
|
|
|
|
|
this.uavGraphicLayer.addGraphic(graphic)
|
|
|
|
|
|
|
|
|
|
this.uavGraphicLayer.flyTo();
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
playerVideo(phone){
|
|
|
|
|
if (this.player) {
|
|
|
|
|
this.player.src("http://live.hopetrytech.com/live/" + phone + ".flv");
|
|
|
|
|
} else {
|
|
|
|
|
this.player = TCPlayer('player-container-id', {});
|
|
|
|
|
this.player.src("http://live.hopetrytech.com/live/" + phone + ".flv");
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
@ -48,6 +135,7 @@
|
|
|
|
|
width:100%;
|
|
|
|
|
height:100%;
|
|
|
|
|
text-align: left;
|
|
|
|
|
position:relative;
|
|
|
|
|
}
|
|
|
|
|
.box-title{
|
|
|
|
|
width: 100%;
|
|
|
|
|
@ -62,14 +150,14 @@
|
|
|
|
|
}
|
|
|
|
|
.box-container{
|
|
|
|
|
width:100%;
|
|
|
|
|
height: calc( 100% - 60px);
|
|
|
|
|
padding-top: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.video-container{
|
|
|
|
|
width: 235px;
|
|
|
|
|
float:left;
|
|
|
|
|
margin:15px;
|
|
|
|
|
height: calc( 100% - 30px);
|
|
|
|
|
height: 178px;
|
|
|
|
|
background:rgba(0,0,0,0.4);
|
|
|
|
|
}
|
|
|
|
|
.none-uav{
|
|
|
|
|
@ -143,4 +231,90 @@
|
|
|
|
|
.none-uav .uav-item p{
|
|
|
|
|
margin-bottom:0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.leida{
|
|
|
|
|
background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent);
|
|
|
|
|
background-size: 3rem 3rem;
|
|
|
|
|
background-position: -5.2rem -5.2rem;
|
|
|
|
|
width: calc( 100% - 30px);
|
|
|
|
|
height:178px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top:75px;
|
|
|
|
|
left:15px;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: 1.6rem;
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.tangjialing {
|
|
|
|
|
background: -webkit-radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), -webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), -webkit-linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), -webkit-linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
|
|
|
|
|
background: radial-gradient(center, rgba(32, 255, 77, 0.3) 0%, rgba(32, 255, 77, 0) 75%), repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%, rgba(32, 255, 77, 0) 18%, #20ff4d 18.6%, rgba(32, 255, 77, 0) 18.9%), linear-gradient(90deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%), linear-gradient(0deg, rgba(32, 255, 77, 0) 49.5%, #20ff4d 50%, #20ff4d 50%, rgba(32, 255, 77, 0) 50.2%);
|
|
|
|
|
width: 408px;
|
|
|
|
|
height: 408px;
|
|
|
|
|
max-height: 75vh;
|
|
|
|
|
max-width: 75vh;
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 50%;
|
|
|
|
|
top: 50%;
|
|
|
|
|
transform: translate(-50%, -70%);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
/* border: 0.2rem solid #0cdd36;; */
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
}
|
|
|
|
|
.tangjialing:before {
|
|
|
|
|
content: ' ';
|
|
|
|
|
display: block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
animation: bei 5s infinite;
|
|
|
|
|
animation-timing-function: linear;
|
|
|
|
|
animation-delay: 1.4s;
|
|
|
|
|
}
|
|
|
|
|
.tangjialing:after {
|
|
|
|
|
content: ' ';
|
|
|
|
|
display: block;
|
|
|
|
|
background-image: linear-gradient(44deg, rgba(0, 255, 51, 0) 50%, #00bb22 100%);
|
|
|
|
|
width: 50%;
|
|
|
|
|
height: 50%;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: 0;
|
|
|
|
|
animation: zhuan 5s infinite;
|
|
|
|
|
animation-timing-function: linear;
|
|
|
|
|
transform-origin: bottom right;
|
|
|
|
|
border-radius: 100% 0 0 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@keyframes zhuan {
|
|
|
|
|
0% {
|
|
|
|
|
transform: rotate(0deg);
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@keyframes bei {
|
|
|
|
|
14% {
|
|
|
|
|
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
|
}
|
|
|
|
|
14.0002% {
|
|
|
|
|
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
|
}
|
|
|
|
|
25% {
|
|
|
|
|
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
|
}
|
|
|
|
|
26% {
|
|
|
|
|
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
|
opacity: 1;
|
|
|
|
|
}
|
|
|
|
|
100% {
|
|
|
|
|
background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
|
|
|
|
|
opacity: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
