fix：跟车病害调整，跟车视频调整

package.json

@@ -48,6 +48,7 @@
     "echarts-gl": "^2.0.9",
     "element-ui": "2.15.14",
     "file-saver": "2.0.5",
+    "flv.js": "^1.6.2",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
     "js-beautify": "1.13.0",

src/views/big-screen/disease-components/traffic-safety.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-21 09:59:32
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-21 09:05:48
+ * @LastEditTime: 2024-12-03 14:52:09
  * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\traffic-safety.vue
  * @Description: 病害巡检大屏-今日巡查
 -->
@@ -635,7 +635,7 @@ export default {
     align-items: center;
     justify-content: center;
     padding-left: 1.5rem;
-    font-size: 2rem;
+    font-size: 1.5rem;
     // background-image: url("../../../assets/screen/traffic/traffic-left.png");
     background-image: url("~@/assets/screen/disease/today-left.png");
     background-repeat: no-repeat;

src/views/big-screen/overview-components/components/inspection-follow.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-15 13:14:03
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-03 13:10:46
+ * @LastEditTime: 2024-12-03 14:32:34
  * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-follow.vue
  * @Description: 总览大屏-巡检车辆-跟车弹窗
 -->
@@ -32,6 +32,8 @@ export default {
     return {
       // 小车图层数据源
       carLayerSource: null,
+      // 病害图层数据源
+      defectLayerSource: null,
     };
   },
   created() {
@@ -47,8 +49,7 @@ export default {
         if (item.type === "carPosition") {
           if (!this.carMapPointSource) {
             this.drawCarMapPoint(item.data);
-          } 
+          } else {
-          else {
             // 获取当前位置和目标位置
             const currentLocation = this.carMapPointSource
               .getFeatures()[0]
@@ -90,7 +91,16 @@ export default {
             }, 10);
           }
         } else if (item.type === "defect") {
-          console.log(item, "生成得病害");
+          if (!this.defectLayerSource) {
+            this.drawDefectMapPoint(item.data);
+          } else {
+            const feature = new Feature({
+              geometry: new Point(item.geometry.coordinates),
+              data: item,
+              type: "defectPoint",
+            });
+            this.defectLayerSource.addFeature(feature);
+          }
         }
       });
     },
@@ -135,6 +145,45 @@ export default {
         map.addLayer(carMapPointLayer);
       });
     },
+
+    /**
+     * @description: 绘制病害地图点位
+     * @param {object} item
+     * @return {void}
+     */
+    drawDefectMapPoint(item) {
+      const features = [];
+      const feature = new Feature({
+        geometry: new Point(item.geometry.coordinates),
+        data: item,
+        type: "defectPoint",
+      });
+      // 可以给点位设置样式
+      feature.setStyle([
+        new Style({
+          image: new Icon({
+            crossOrigin: "anonymous",
+            src: require(`@/assets/screen/index/${item.defecttype}.png`),
+            // 图标缩放比例
+            scale: 0.5,
+          }),
+        }),
+      ]);
+      features.push(feature);
+      this.defectLayerSource = new VectorSource({
+        features,
+      });
+      const carMapPointLayer = new VectorLayer({
+        source: this.defectLayerSource,
+        properties: {
+          type: "defectPoint",
+        },
+      });
+      this.$nextTick(() => {
+        const map = this.$refs.carMap.instance.get("map");
+        map.addLayer(carMapPointLayer);
+      });
+    },
   },
 };
 </script>

src/views/big-screen/overview-components/components/inspection-view.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-15 14:23:21
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-03 13:35:29
+ * @LastEditTime: 2024-12-03 14:14:14
  * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\components\inspection-view.vue
  * @Description: 总览大屏-巡检车辆-视频查看弹窗
 -->
@@ -10,18 +10,20 @@
 <template>
   <div class="view-content">
     <video
-      id="mmiid"
+      id="videoElement"
-      class="video-js vjs-big-play-centered vjs-fluid"
+      crossOrigin="anonymous"
       controls
-      preload="auto"
+      autoplay
+      muted
       width="100%"
-      height="100%"
+      height="800px"
     ></video>
   </div>
 </template>
 
 <script>
 import { getVideoUrl } from "@/api/xj/screen/disease-screen";
+import flvjs from "flv.js";
 export default {
   name: "InspectionView",
   props: {
@@ -34,6 +36,9 @@ export default {
     return {
       // 视频播放地址
       vedioUrl: "",
+      isPlay: false,
+      player: null,
+      timerId: null,
     };
   },
   created() {
@@ -42,40 +47,76 @@ export default {
   methods: {
     /* 获取视频url地址 */
     getVideo() {
-      // 获取视频流地址
+      getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, msg }) => {
-      getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
         if (code === 200) {
-          // 判断视频流地址是否存在
+          this.$nextTick(() => {
-          if (!data) {
+            this.createVideo(msg);
-            this.$message.error('获取视频流失败');
+          });
-            return;
-          }
-          
-          // 创建 flv.js 播放器
-          if (flvjs.isSupported()) {
-            const flvPlayer = flvjs.createPlayer({
-              type: 'flv',
-              url: "http://1011.hlsplay.aodianyun.com/demo/game.flv",
-              isLive: true,
-              hasAudio: true,
-              hasVideo: true
-            });
-            
-            flvPlayer.attachMediaElement(document.querySelector("#mmiid"));
-            flvPlayer.load();
-            flvPlayer.play();
-          } else {
-            this.$message.error('当前浏览器不支持FLV播放');
-          }
         }
       });
-      
-      // getVideoUrl({ id: this.dialogItem.clientId }).then(({ code, data }) => {
-      //   if (code === 200) {
-      //     console.log(data, "data");
-      //   }
-      // });
     },
+    createVideo(url) {
+      if (flvjs.isSupported()) {
+        const videoElement = document.getElementById("videoElement");
+        this.player = flvjs.createPlayer(
+          {
+            type: "flv",
+            isLive: true,
+            hasAudio: false,
+            url, // 自己的flv视频流
+            enableWorker: false, //启用 Web Worker 进程来加速视频的解码和处理过程
+            stashInitialSize: 32 * 1024, // 初始缓存大小。单位：字节。建议针对直播：调整为1024kb
+            stashInitialTime: 2, // 缓存初始时间。单位：秒。建议针对直播：调整为200毫秒
+            seekType: "range", // 建议将其设置为“range”模式，以便更快地加载视频数据，提高视频的实时性。
+            lazyLoad: false, //关闭懒加载模式，从而提高视频的实时性。建议针对直播：调整为false
+            lazyLoadMaxDuration: 2, // 懒加载的最大时长。单位：秒。建议针对直播：调整为200毫秒
+            deferLoadAfterSourceOpen: false,
+          },
+          {
+            cors: true, // 是否跨域
+            // enableWorker: true, // 是否多线程工作
+            enableStashBuffer: false, // 是否启用缓存
+            // stashInitialSize: 128, // 缓存大小(kb)  默认384kb
+            autoCleanupSourceBuffer: true, // 是否自动清理缓存
+          }
+        );
+        this.player.attachMediaElement(videoElement); //挂载元素
+        this.player.load(); //加载流
+        this.player.play(); //播放流
+        // 追帧
+        //    if (this.timerId !== null) {
+        //      clearInterval(this.timerId);
+        //    }
+        //    this.timerId = setInterval(() => {
+        //      if (videoElement.buffered.length > 0) {
+        //        const end = videoElement.buffered.end(0); // 视频结尾时间
+        //        const current = videoElement.currentTime; //  视频当前时间
+        //        const diff = end - current; // 相差时间
+        //       //  console.log(diff);
+        //        const diffCritical = 4; // 这里设定了超过4秒以上就进行跳转
+        //        const diffSpeedUp = 1; // 这里设置了超过1秒以上则进行视频加速播放
+        //        const maxPlaybackRate = 4; // 自定义设置允许的最大播放速度
+        //        let playbackRate = 1.0; // 播放速度
+        //        if (diff > diffCritical) {
+        //         //  console.log("相差超过4秒，进行跳转");
+        //          videoElement.currentTime = end - 1.5;
+        //          playbackRate = Math.max(1, Math.min(diffCritical, 16));
+        //        } else if (diff > diffSpeedUp) {
+        //         //  console.log("相差超过1秒，进行加速");
+        //          playbackRate = Math.max(1, Math.min(diff, maxPlaybackRate, 16));
+        //        }
+        //        videoElement.playbackRate = playbackRate;
+        //        if (videoElement.paused) {
+        //          this.videoForm.player.play();
+        //        }
+        //      }
+        // }, 1000);
+      }
+    },
+  },
+
+  destroyed() {
+    clearInterval(this.timerId);
   },
 };
 </script>

src/views/big-screen/overview-components/inspection-vehicles.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-08 09:40:18
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-12-03 13:19:02
+ * @LastEditTime: 2024-12-03 14:10:16
  * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\inspection-vehicles.vue
  * @Description: 总览大屏-巡检车辆
 -->
@@ -132,7 +132,7 @@
     <el-dialog
       :title="viewTitle"
       :visible.sync="showViewVisible"
-      width="60rem"
+      width="90rem"
       append-to-body
       :close-on-click-modal="false"
       destroy-on-close

src/views/big-screen/overview-components/today-inspection.vue

@@ -2,7 +2,7 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-10-18 09:42:49
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-20 16:27:24
+ * @LastEditTime: 2024-12-03 14:51:42
  * @FilePath: \znxjxt-ui\src\views\big-screen\overview-components\today-inspection.vue
  * @Description: 总览大屏-今日巡查
 -->
@@ -622,7 +622,7 @@ export default {
 
     span {
       cursor: pointer;
-      font-size: 2rem;
+      font-size: 1.5rem;
       font-weight: 800;
       font-family: "DouYu";
       background: linear-gradient(

src/views/xj/inspection/confirmation-management/components/image-dialog.vue

@@ -2,8 +2,8 @@
  * @Author: SunTao 328867980@qq.com
  * @Date: 2024-11-01 17:25:06
  * @LastEditors: SunTao 328867980@qq.com
- * @LastEditTime: 2024-11-14 15:00:35
+ * @LastEditTime: 2024-12-03 15:14:12
- * @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\image-dialog.vue
+ * @FilePath: \znxjxt-ui\src\views\xj\inspection\confirmation-management\components\image-dialog.vue
  * @Description: 病害确认-影像模式弹窗
 -->
 
@@ -139,10 +139,10 @@
       </div>
     </div>
     <div class="footer">
-      <el-button type="success" size="mini" @click="changeDefect(1)"
+      <el-button type="success" size="mini" @click="changeDefect(2)"
         >是病害(Y)</el-button
       >
-      <el-button type="warning" size="mini" @click="changeDefect(0)"
+      <el-button type="warning" size="mini" @click="changeDefect(3)"
         >不是病害(N)</el-button
       >
     </div>
@@ -416,21 +416,23 @@ export default {
 
     /* 是病害/不是病害点击事件 */
     changeDefect(value) {
-      mergeDefect({
+      if (this.defectData.length > 0) {
-        status: value,
+        mergeDefect({
-        snapShotIds: [this.defectData[this.currentIndex].snapshotId],
+          status: value,
-      })
+          snapShotIds: [this.defectData[this.currentIndex].snapshotId],
-        .then(({ code, msg }) => {
-          if (code === 200) {
-            this.showImage(this.currentIndex);
-            this.$modal.msgSuccess("修改成功");
-          } else {
-            this.$modal.msgWarning(msg);
-          }
         })
-        .finally(() => {
+          .then(({ code, msg }) => {
-          this.getList();
+            if (code === 200) {
-        });
+              this.showImage(this.currentIndex);
+              this.$modal.msgSuccess("修改成功");
+            } else {
+              this.$modal.msgWarning(msg);
+            }
+          })
+          .finally(() => {
+            this.getList();
+          });
+      }
     },
 
     /* 键盘事件 */
@@ -457,10 +459,10 @@ export default {
         }
       } else if (event.keyCode === 89) {
         // 确认病害
-        this.changeDefect(1);
+        this.changeDefect(2);
       } else if (event.keyCode === 78) {
         // 不是病害
-        this.changeDefect(0);
+        this.changeDefect(3);
       }
     },
   },