reactor:视频播放弹窗添加头部

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

@@ -1,6 +1,18 @@
 <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>
 
@@ -12,13 +24,14 @@ export default {
   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,//是否静音
-        type:"flv",
+      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()) {
@@ -32,14 +45,14 @@ export default {
           }
         }
       },
-      style:{
+      tsModalVisible: false,
+      style: {
         width: '600px',
-        height: '400px',
-        margin: '60px auto 0',
+        height: '350px'
       }
     }
   },
-  components:{
+  components: {
     Artplayer
   },
   mounted() {
@@ -52,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
     }
   }
 }
@@ -65,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>