fix:添加视频

src/views/components/VideoPlayer.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="video-player-comp">
+    <video id="videoPlayerId" ref="videoRef" :autoplay="true" muted></video>
+  </div>
+</template>
+<script>
+import flvjs from "../../vendors/flv";
+
+export default {
+  props: {
+    url: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      flvPlayer: false,
+    };
+  },
+  created() {},
+  watch: {
+    url: {
+      handler: function (val, oldVal) {
+        if (val) {
+          this.$nextTick(() => {
+            this.play(val);
+          });
+        } else {
+          if (this.flvPlayer) this.flvPlayer.destroy();
+          this.flvPlayer = false;
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    play(url) {
+      const videoEle = document.getElementById("videoPlayerId");
+      console.log("videoEle >>>>>  ", videoEle);
+      if (videoEle && url) {
+        if (this.flvPlayer) {
+          this.flvPlayer.destroy();
+          this.flvPlayer = false;
+        }
+
+        this.flvPlayer = flvjs.createPlayer({
+          type: "flv",
+          isLive: true,
+          cors: true,
+          url: url,
+        });
+        this.flvPlayer.attachMediaElement(videoEle);
+        this.flvPlayer.load();
+        console.log("开始播放 >>>> ");
+        this.flvPlayer.play();
+      }
+    },
+  },
+  beforeDestroy() {
+    if (this.flvPlayer) {
+      this.flvPlayer.destroy();
+      this.flvPlayer = false;
+    }
+  },
+};
+</script>
+<style scoped lang="scss">
+.video-player-comp {
+  width: 100%;
+  height: 100%;
+  background: #383838;
+  video {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/reservoir/safeOperation/components/ProjectDetail.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="project-detail-page">
-    <el-tabs :tab-position="'left'" v-model="activeTab">
+    <el-tabs class="my-tabs" :tab-position="'left'" v-model="activeTab">
       <el-tab-pane label="基础信息" name="1" lazy>
         <BaseInfo
           ref="baseInfoRef"
@@ -83,6 +83,11 @@ export default {
 </script>
 <style scoped lang="scss">
 .project-detail-page {
+  .my-tabs {
     min-height: 600px;
+    .el-tabs__content {
+      height: 100%;
+    }
+  }
 }
 </style>

src/views/reservoir/safeOperation/components/VideoAnalysis.vue

@@ -1,44 +1,54 @@
 <template>
   <div class="video-analysis">
-    <div class="videoSelect">
+    <template v-if="videoList.length">
-      <el-select
+      <div class="videoBox" v-for="index in 9" :key="index">
-        placeholder="请选择视频"
+        <div
-        v-model="activeVideo"
+          class="video-player-box"
-        size="mini"
+          ref="videoPlayerBoxRef"
-        style="width: 240px"
+          v-if="videoList[index - 1]"
-        @change="change"
         >
-        <el-option
+          <div class="video-player-title">
-          v-for="item in videoList"
+            <div>
-          :key="item"
+              {{ videoList[index - 1].cameraId || `视频${index}` }}
-          :label="item"
+            </div>
-          :value="item"
+            <img
+              @click="handleFullscreen(index - 1, true)"
+              src="@/assets/image/icon-fullscreen.png"
+              class="fullscreen-btn"
+            />
+            <img
+              @click="handleFullscreen(index - 1, false)"
+              src="@/assets/image/icon-fullscreen-close.png"
+              class="fullscreen-close-btn"
             />
-      </el-select>
           </div>
-    <el-tabs v-model="activeName">
+          <!-- <VideoPlayer :url="videoList[index - 1].flvPlayUrl"></VideoPlayer> -->
-      <el-tab-pane label="实时视频" name="realTime">
+          <VideoPlayer
-        <div class="videoBox">
+            url="http://172.16.32.69/live/test.live.flv"
-          <video
+          ></VideoPlayer>
-            style="width: 100%; height: 100%"
+        </div>
-            :src="videoUrl"
-            v-if="videoUrl"
-          ></video>
         <div v-else class="videoNull">
           <div class="videoContent">
-              <img src="@/assets/image/videoNull.png" />
+            <img src="@/assets/image/videoNull2.png" />
-              <span>暂无内容</span>
+            <span>暂无视频</span>
           </div>
         </div>
       </div>
-      </el-tab-pane>
+    </template>
-    </el-tabs>
+    <div v-else class="video-no-data">
+      <img src="@/assets/image/videoNull3.png" alt="" />
+      <div>暂无接入</div>
+    </div>
   </div>
 </template>
 <script>
 import { getVideoDataList, getOperationPlay } from "@/api/reservoir";
+import VideoPlayer from "../../../components/VideoPlayer.vue";
 
 export default {
+  components: {
+    VideoPlayer,
+  },
   props: {
     resCode: {
       type: String,
@@ -47,46 +57,92 @@ export default {
   },
   data() {
     return {
-      activeName: "realTime",
+      videoList: [],
-      videoUrl: "",
-      activeVideo: "",
-      videoList: [
-      ],
     };
   },
   created() {
-    getVideoDataList({
+    getOperationPlay({
-      pageNum: 1,
-      pageSize: 100,
       resCode: this.resCode,
     }).then((res) => {
       if (res.data) {
-        this.videoList = res.data.cameraIds;
+        this.videoList = res.data.urlsMapList || [];
       }
     });
   },
   methods: {
-    change(val) {
+    handleFullscreen(index) {
-      console.log("cameraId-watch >>>>>  ", val);
+      this.$refs.videoPlayerBoxRef[index].classList.toggle("fullscreen");
-      getOperationPlay({
-        cameraId: val,
-      }).then((res) => {
-      if (res.data) {
-        this.videoUrl = res.data.urlsMap.flvPlayUrl;
-      }
-    });
     },
   },
 };
 </script>
 <style scoped lang="scss">
 .video-analysis {
+  position: relative;
+  padding: 20px;
+  display: flex;
+  flex-wrap: wrap;
+  align-content: baseline;
+  width: 100%;
+  height: 100%;
   .videoBox {
-    height: 558px;
+    width: 320px;
+    height: 180px;
+    margin-right: 16px;
+    margin-bottom: 16px;
+    .video-player-box {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      .fullscreen-btn {
+        cursor: pointer;
+        display: block;
+      }
+      .fullscreen-close-btn {
+        cursor: pointer;
+        display: none;
+      }
+      &.fullscreen {
+        position: absolute;
+        width: calc(100% - 40px);
+        height: calc(100% - 40px);
+
+        left: 20px;
+        top: 20px;
+        z-index: 2;
+        .fullscreen-btn {
+          display: none;
+        }
+        .fullscreen-close-btn {
+          display: block;
+        }
+      }
+
+      .video-player-title {
+        position: absolute;
+        width: 100%;
+        padding: 0 8px;
+        left: 0;
+        top: 0;
+        color: #fff;
+        font-size: 12px;
+        height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        z-index: 1;
+        background: linear-gradient(180deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
+        img {
+          width: 18px;
+          height: 18px;
+        }
+      }
+
       video {
         width: 100%;
         height: 100%;
       }
+    }
     .videoNull {
       width: 100%;
       height: 100%;
@@ -95,10 +151,11 @@ export default {
       justify-content: center;
       align-items: center;
       .videoContent {
+        font-size: 12px;
         img {
-          width: 44px;
+          width: 48px;
-          height: 35px;
+          height: 48px;
-          margin-bottom: 8px;
+          margin-bottom: 4px;
         }
         display: flex;
         flex-direction: column;
@@ -107,11 +164,21 @@ export default {
       }
     }
   }
-  .videoSelect {
+
-    position: absolute;
+  .video-no-data {
-    z-index: 12;
+    width: 100%;
-    right: 0;
+    height: 480px;
-    top: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    font-size: 16px;
+    color: #262626;
+    img {
+      width: 80px;
+      height: 80px;
+      margin-bottom: 16px;
+    }
   }
 }
 </style>