From 3d176160474f15da39f3bed7c7b9b9022f8738ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BD=95=E5=B3=A5=E5=82=B2?=
 <13203204+he-zhengao@user.noreply.gitee.com>
Date: Mon, 11 Dec 2023 20:40:44 +0800
Subject: [PATCH] 1

---
 .../videoMonitor/components/videoDialog.vue   | 183 +++++++++---------
 1 file changed, 95 insertions(+), 88 deletions(-)

diff --git a/src/views/videoMonitor/components/videoDialog.vue b/src/views/videoMonitor/components/videoDialog.vue
index 0870da5..5070667 100644
--- a/src/views/videoMonitor/components/videoDialog.vue
+++ b/src/views/videoMonitor/components/videoDialog.vue
@@ -1,115 +1,122 @@
 <template>
   <el-dialog
-  class="dialog"
-  :title="title"
-  :visible.sync="visible"
-  :close-on-click-modal="false"
-  width="1600px"
-  @close="close"
+    class="dialog"
+    :title="title"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="1600px"
+    @close="close"
   >
-  <div class="dialog_box">
-    <div class="left_box">
-      <!-- 拟标题 -->
-      <div class="left_box_title">
-        <div class="left_box_title_text">重点人员信息</div>
-        <div class="in_box">
-          <div class="in_box_text">
-            <div class="in_box_text_item">设备名称:</div>
-            <div class="in_box_text_item">设备IP:</div>
-            <div class="in_box_text_item">监控类型:</div>
-            <div class="in_box_text_item">国际编码:</div>
-            <div class="in_box_text_item">设备方位:</div>
-            <div class="in_box_text_item">设备品牌:</div>
-            <div class="in_box_text_item">设备经度:</div>
-            <div class="in_box_text_item">设备纬度:</div>
+    <div class="dialog_box">
+      <div class="left_box">
+        <!-- 拟标题 -->
+        <div class="left_box_title">
+          <div class="left_box_title_text">重点人员信息</div>
+          <div class="in_box">
+            <div class="in_box_text">
+              <div class="in_box_text_item">设备名称:</div>
+              <div class="in_box_text_item">设备IP:</div>
+              <div class="in_box_text_item">监控类型:</div>
+              <div class="in_box_text_item">国际编码:</div>
+              <div class="in_box_text_item">设备方位:</div>
+              <div class="in_box_text_item">设备品牌:</div>
+              <div class="in_box_text_item">设备经度:</div>
+              <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">{{ this.in.device_id }}</div>
+              <div class="in_box_value_item"></div>
+              <div class="in_box_value_item"></div>
+              <div class="in_box_value_item"></div>
+              <div class="in_box_value_item"></div>
+              <div class="in_box_value_item">{{ this.in.longitude }}</div>
+              <div class="in_box_value_item">{{ this.in.latitude }}</div>
+            </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">{{ this.in.device_id }}</div>
-            <div class="in_box_value_item"></div>
-            <div class="in_box_value_item"></div>
-            <div class="in_box_value_item"></div>
-            <div class="in_box_value_item"></div>
-            <div class="in_box_value_item">{{ this.in.longitude }}</div>
-            <div class="in_box_value_item">{{ this.in.latitude }}</div>
+          <div class="btn_box">
+            <div class="video_btn">
+              <div class="video_icon"></div>
+              <div class="video_text">视频回放</div>
+            </div>
+            <div class="video_btn">
+              <div class="around_video_icon"></div>
+              <div class="video_text">周边视频</div>
+            </div>
           </div>
-        </div>
-        <div class="btn_box">
-          <div class="video_btn">
-            <div class="video_icon"></div>
-            <div class="video_text">视频回放</div>
-          </div>
-          <div class="video_btn">
-            <div class="around_video_icon"></div>
-            <div class="video_text">周边视频</div>
-          </div>
-        </div>
-        <div class="footer_box">
-          <div class="start_time_box">
-            <div class="time_text">开始时间：</div>
-            <el-date-picker
-            v-model="starttime"
-            type="datetime"
-            placeholder="选择开始时间"
-            ></el-date-picker>
-          </div>
-          <div class="end_time_box">
-            <div class="time_text">结束时间：</div>
-            <el-date-picker
-            v-model="endtime"
-            type="datetime"
-            placeholder="选择结束时间"
-            ></el-date-picker>
+          <div class="footer_box">
+            <div class="start_time_box">
+              <div class="time_text">开始时间：</div>
+              <el-date-picker
+                v-model="starttime"
+                type="datetime"
+                placeholder="选择开始时间"
+              ></el-date-picker>
+            </div>
+            <div class="end_time_box">
+              <div class="time_text">结束时间：</div>
+              <el-date-picker
+                v-model="endtime"
+                type="datetime"
+                placeholder="选择结束时间"
+              ></el-date-picker>
+            </div>
           </div>
         </div>
       </div>
+      <div class="right_box">
+        <LivePlayer
+          :videoUrl="url"
+          fluent
+          :autoplay="true"
+          style="width: 52.1vw"
+        ></LivePlayer>
+      </div>
     </div>
-    <div class="right_box">
-      <LivePlayer :videoUrl="url" fluent :autoplay="true" style="width: 52.1vw;"></LivePlayer>
-    </div>
-  </div>
   </el-dialog>
 </template>
 <script>
 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;
@@ -286,4 +293,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>