Merge branch 'dev' of http://git.dnzc.vip:3000/yangqishu/tmzn-weihe into dev

src/components/video-player/video-player.vue

@@ -4,7 +4,6 @@
 
 <script>
 import Artplayer from 'artplayer'
-import flvjs from 'flv.js'
 export default {
   name: 'ArtPlayer',
   props: {
@@ -22,20 +21,7 @@ export default {
     initPlayer() {
       this.artPlayer = new Artplayer({
         ...this.option,
-        container: this.$refs.videoPlayer,
-        type:"flv",
-        customType: {
-          flv: (video, url, art) => {
-            if (flvjs.isSupported()) {
-              if (art.flv) art.flv.destroy()
-              const flv = flvjs.createPlayer({ type: 'flv', url })
-              flv.attachMediaElement(video)
-              flv.load()
-              art.flv = flv
-              art.on('destroy', () => flv.destroy())
-            }
-          }
-        }
+        container: this.$refs.videoPlayer
       })
     }
   },

src/views/video-play-popup/index.vue

@@ -1,31 +1,58 @@
 <template>
   <div class="video-player-container" v-if="visible">
-    <Artplayer :option="option"  :style="style" @getInstance="getInstance" />
+    <div class="video-player-title">
+      <span class="title-text">{{ title }}</span>
+      <img src="@/assets/image/common/close.png" style="cursor: pointer" alt="" @click="openTsModal" />
+    </div>
+    <Artplayer :option="option" :style="style" @getInstance="getInstance" />
+    <el-dialog title="提示" :visible.sync="tsModalVisible" width="60%">
+      <span>是否中断当前巡查点监控，进行下一个巡查点视频播放？</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="closeVideoDialog">中断当前视频</el-button>
+        <el-button @click="toNext">播放下一个视频</el-button>
+        <el-button @click="tsModalVisible = false">取 消</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 import Artplayer from '@/components/video-player/video-player.vue'
+import flvjs from 'flv.js'
 export default {
   name: 'WaterStationPopup',
   data() {
     return {
       visible: false,
-      title:'',
-      option:{
-        url:"ws://10.157.200.5:9381/live/43010000831327000018_0_0_39f33131b0ac4611a4e7da4d692a1195.flv",
-        isLive:true,//使用直播模式，会隐藏进度条和播放时间
-        autoplay:true,
-        muted: true//是否静音
+      title: '巡查点',
+      option: {
+        url: 'ws://10.157.200.5:9381/live/43010000831327000018_0_0_39f33131b0ac4611a4e7da4d692a1195.flv',
+        isLive: true, //使用直播模式，会隐藏进度条和播放时间
+        autoplay: true,
+        muted: true, //是否静音
+        type: 'flv',
+        autoSize: true,
+        customType: {
+          flv: (video, url, art) => {
+            if (flvjs.isSupported()) {
+              if (art.flv) art.flv.destroy()
+              const flv = flvjs.createPlayer({ type: 'flv', url })
+              flv.attachMediaElement(video)
+              flv.load()
+              art.flv = flv
+              art.on('destroy', () => flv.destroy())
+            }
+          }
+        }
       },
-      style:{
+      tsModalVisible: false,
+      style: {
         width: '600px',
-        height: '400px',
-        margin: '60px auto 0',
+        height: '350px'
       }
     }
   },
-  components:{
+  components: {
     Artplayer
   },
   mounted() {
@@ -38,8 +65,15 @@ export default {
     this.$globalEventBus.$off('clickVideoPlay')
   },
   methods: {
-    getInstance(art){
+    getInstance(art) {
       console.info(art)
+    },
+    openTsModal() {
+      this.tsModalVisible = true
+    },
+    toNext() {},
+    closeVideoDialog() {
+      this.visible = false
     }
   }
 }
@@ -51,7 +85,22 @@ export default {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -80%);
-  width: px-to-rem(600);
+  width: 600px;
   z-index: 9999;
+  .video-player-title {
+    background: url('@/assets/image/common/popup_title_bg.png') no-repeat;
+    background-size: 100% 100%;
+    height: px-to-rem(39);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 px-to-rem(20);
+    font-size: px-to-rem(16);
+    color: #fff;
+    .title-text {
+      font-weight: bold;
+      margin-left: px-to-rem(20);
+    }
+  }
 }
 </style>