1

src/views/videoMonitor/components/videoDialog.vue

@@ -24,7 +24,9 @@
               <div class="in_box_text_item">设备纬度:</div>
             </div>
             <div class="in_box_value">
-            <div class="in_box_value_item blue">{{ this.in.channel_name }}</div>
+              <div class="in_box_value_item blue">
+                {{ this.in.channel_name }}
+              </div>
               <div class="in_box_value_item">{{ this.in.device_id }}</div>
               <div class="in_box_value_item"></div>
               <div class="in_box_value_item"></div>
@@ -65,7 +67,12 @@
         </div>
       </div>
       <div class="right_box">
-      <LivePlayer :videoUrl="url" fluent :autoplay="true" style="width: 52.1vw;"></LivePlayer>
+        <LivePlayer
+          :videoUrl="url"
+          fluent
+          :autoplay="true"
+          style="width: 52.1vw"
+        ></LivePlayer>
       </div>
     </div>
   </el-dialog>
@@ -74,42 +81,42 @@
 import LivePlayer from '@liveqing/liveplayer'
 import { login } from '@/api/facility'
 export default {
-  name:'VideoDialog',
+  name: 'VideoDialog',
   components: { LivePlayer },
   data() {
     return {
       visible: false,
-      title:'',
-      in:{
-        channel_name:'',
-        device_id:'',
-        longitude:'',
-        latitude:''
+      title: '',
+      in: {
+        channel_name: '',
+        device_id: '',
+        longitude: '',
+        latitude: ''
       },
-      starttime:'',
-      endtime:"",
-      url:'',
-      token:'',
+      starttime: '',
+      endtime: '',
+      url: '',
+      token: ''
     }
   },
   created() {
     this.getGbsToken()
   },
-  methods:{
-    open(item,data) {
+  methods: {
+    open(item, data) {
       this.visible = true
-      console.log('item',item)
+      console.log('item', item)
       this.title = item.ChannelName
       this.in.channel_name = item.ChannelName
       this.in.device_id = item.DeviceID
       this.in.longitude = data.longitude
       this.in.latitude = data.latitude
       this.url = item.WS_FLV + `?token=${this.token}`
-      console.log('this', this.url);
+      console.log('this', this.url)
     },
     getGbsToken() {
-      login().then(res=>{
-        console.log('tttt',res);
+      login().then((res) => {
+        console.log('tttt', res)
         this.token = res.URLToken
       })
     },
@@ -121,7 +128,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 ::v-deep .el-dialog {
-  background-image: url("~@/assets/icon-hza/dialog_back01.png");
+  background-image: url('~@/assets/icon-hza/dialog_back01.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
   height: 68vh;
@@ -141,13 +148,13 @@ export default {
       .left_box {
         width: 20vw;
         height: 60vh;
-        background-image: url("~@/assets/icon-hza/bg_left02.png");
+        background-image: url('~@/assets/icon-hza/bg_left02.png');
         background-size: 100% 100%;
         background-repeat: no-repeat;
         .left_box_title {
           width: 20vw;
           height: 5vh;
-          background-image: url("~@/assets/icon-hza/bg_title02.png");
+          background-image: url('~@/assets/icon-hza/bg_title02.png');
           background-size: 100% 100%;
           background-repeat: no-repeat;
           .left_box_title_text {
@@ -197,7 +204,7 @@ export default {
           .video_btn {
             width: 9vw;
             height: 4vh;
-            background-image: url("~@/assets/icon-hza/video_btn.png");
+            background-image: url('~@/assets/icon-hza/video_btn.png');
             background-size: 100% 100%;
             background-repeat: no-repeat;
             display: flex;
@@ -207,14 +214,14 @@ export default {
             .video_icon {
               width: 1vw;
               height: 2vh;
-              background-image: url("~@/assets/icon-hza/check_video.png");
+              background-image: url('~@/assets/icon-hza/check_video.png');
               background-size: 100% 100%;
               background-repeat: no-repeat;
             }
             .around_video_icon {
               width: 1vw;
               height: 2vh;
-              background-image: url("~@/assets/icon-hza/around_video.png");
+              background-image: url('~@/assets/icon-hza/around_video.png');
               background-size: 100% 100%;
               background-repeat: no-repeat;
             }
@@ -227,7 +234,7 @@ export default {
             }
           }
           .video_btn:hover {
-            background-image: url("~@/assets/icon-hza/video_btn_hover.png");
+            background-image: url('~@/assets/icon-hza/video_btn_hover.png');
           }
         }
         .footer_box {
@@ -245,7 +252,7 @@ export default {
               color: #bfe7f9;
             }
             .el-input__inner {
-              background: rgba(0,0,0,0);
+              background: rgba(0, 0, 0, 0);
               border: 0.1px solid #00539f;
               border-radius: 0;
               color: #edf1f7;
@@ -266,7 +273,7 @@ export default {
               color: #bfe7f9;
             }
             .el-input__inner {
-              background: rgba(0,0,0,0);
+              background: rgba(0, 0, 0, 0);
               border: 0.1px solid #00539f;
               border-radius: 0;
               color: #edf1f7;