Browse Source

飞行调整,视频播放修改

maxiaoxiao 4 months ago
parent
commit
729adfa7f3
1 changed files with 23 additions and 8 deletions
  1. 23 8
      src/views/farmlandProtection/gdzl/wrjxx.vue

+ 23 - 8
src/views/farmlandProtection/gdzl/wrjxx.vue

@@ -32,6 +32,7 @@
       </div>
       <div class="imgList">
         <video
+          :id="`video${uavit.id}_${vitem.id}`"
           WE
           class="imgDiv"
           preload="none"
@@ -40,6 +41,7 @@
           controls
           v-for="vitem in uavit.videoDtoList"
           :key="vitem.id"
+          @click.prevent="enablePiP(`video${uavit.id}_${vitem.id}`)"
         >
           <span>{{ i + 1 }}</span>
           <source :src="geturl(vitem.video_path)" type="video/mp4" />
@@ -96,15 +98,26 @@ export default {
       return window.axiosURI + "/file/upload/attachment" + url;
     },
     getData() {
-      getgdUav({}).then((res) => {
+      getgdUav({ tilt: 45.0, height: 200.0 }).then((res) => {
         this.uavlsit = res.data;
       });
     },
     checkchange(val, item, uavit) {
-      console.log(val, item, "s0xskcsdcmd");
       if (val) this.getEntities(item, uavit);
       else removeGeoJSON("Image Overlay");
     },
+    enablePiP(name) {
+      var video = document.getElementById(name);
+      if (video.requestPictureInPicture) {
+        video.requestPictureInPicture().catch(function (error) {
+          console.error("Error attempting to enable Picture-in-Picture", error);
+        });
+      } else {
+        console.error(
+          "Picture-in-Picture mode is not supported in this browser."
+        );
+      }
+    },
     clickImg(i) {
       this.bigimg = true;
       this.imgdata = i;
@@ -154,7 +167,7 @@ export default {
         repeat: new Cesium.Cartesian2(1.0, 1.0), // 控制图像重复,这里设置为不重复
         transparent: true, // 如果图像有透明通道,设置为true
         hasAlpha: true,
-    material: new Cesium.ColorMaterialProperty(Cesium.Color.TRANSPARENT)
+        material: new Cesium.ColorMaterialProperty(Cesium.Color.TRANSPARENT),
       });
       imgents[`${i}-${item.id} `] = img_entity.entities.add({
         name: "Image",
@@ -194,10 +207,10 @@ export default {
         ) {
           routeStop.waitTime = 0; // 在每个站点处停留1s
 
-          if (routeStop.index + 4 < uavitem.flightDtoList.length) {
+          if (routeStop.index + 8 < uavitem.flightDtoList.length) {
             that.addImg(uavitem.flightDtoList[routeStop.index + 4], uavitem.id);
           }
-          if (routeStop.index > 4)
+          // if (routeStop.index > 4)
             img_entity.entities.remove(img_entity.entities.values[0]);
           // imgents[`${uavitem.id}-${routeStop.index - 4}`]
           console.log(
@@ -215,8 +228,9 @@ export default {
      */
     startPolylineFly(uavitem) {
       this.addImg(uavitem.flightDtoList[1], uavitem.id);
-      this.addImg(uavitem.flightDtoList[2], uavitem.id);
       this.addImg(uavitem.flightDtoList[3], uavitem.id);
+      this.addImg(uavitem.flightDtoList[5], uavitem.id);
+      this.addImg(uavitem.flightDtoList[7], uavitem.id);
       //初始化飞行管理
       // that.flyHOld = that.flyH;
       //注册站点到达事件
@@ -254,7 +268,8 @@ export default {
 
 <style lang="less" scoped>
 .wrjxx {
-  height: 695px;
+  height: 705px;
+  margin: 20px;
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -314,7 +329,7 @@ export default {
   .imgList {
     width: 100%;
     // height: 300px;
-    max-height: 150px;
+    max-height: 400px;
     display: flex;
     flex-wrap: wrap;
     margin-bottom: 20px;