From 1efd1b0e497fbf62ef0898c6985c5e82ac21a3ce 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: Tue, 5 Dec 2023 10:01:57 +0800
Subject: [PATCH] hza

---
 src/views/coastalMap/index.vue                |  7 +-
 .../videoMonitor/components/livePlayer.vue    | 94 ++++++++++++-------
 src/views/videoMonitor/index.vue              | 88 +++++++++++------
 3 files changed, 126 insertions(+), 63 deletions(-)

diff --git a/src/views/coastalMap/index.vue b/src/views/coastalMap/index.vue
index 53443f8..d822b32 100644
--- a/src/views/coastalMap/index.vue
+++ b/src/views/coastalMap/index.vue
@@ -50,6 +50,9 @@
     <!-- <div class="overlay" v-if="play"></div>
     <div v-else></div> -->
     <!-- -->
+
+    <!-- 实有单位弹窗 -->
+    <ActualUnit></ActualUnit>
     <div class="turn_btn"></div>
   </div>
 </template>
@@ -64,6 +67,7 @@ import PoliceSpread from './components/policeSpread.vue' // * 警力分布
 import SeaElement from './components/seaElement.vue' // * 涉海要素
 import PoliceStatus from './components/policeStatus.vue' // * 警情统计
 // import KeyInformantion from './components/keyInformantion.vue' //弹窗组件
+
 export default {
   name: 'CoastalMap',
   components: {
@@ -72,7 +76,8 @@ export default {
     KeyPerson,
     PoliceSpread,
     SeaElement,
-    PoliceStatus,
+    PoliceStatus
+
     //KeyInformantion
   },
   data() {
diff --git a/src/views/videoMonitor/components/livePlayer.vue b/src/views/videoMonitor/components/livePlayer.vue
index 0c0320d..c6edc34 100644
--- a/src/views/videoMonitor/components/livePlayer.vue
+++ b/src/views/videoMonitor/components/livePlayer.vue
@@ -4,7 +4,7 @@
     <!-- 弹窗整体 -->
     <div class="live_card">
       <div class="live_card_header">
-        <div class="live_card_title">射阳县合德镇解放西路42号（枪机）</div>
+        <div class="live_card_title">射阳幸福大道明湖大桥西侧东向西2(标卡)</div>
         <!-- 关闭弹窗 -->
         <div class="delete" @click="handleClose"></div>
         <!-- <div class="live_card_icon" @click="handleClose">
@@ -21,7 +21,9 @@
             <div class="live_card_body_left_bottom_div">
               <div class="item">
                 设备名称：
-                <div class="bottom_div_color">阿德飒飒打撒</div>
+                <div class="bottom_div_color">
+                  射阳幸福大道明湖大桥西侧东向西2(标卡)
+                </div>
               </div>
               <div class="item">
                 设备Ip:
@@ -59,40 +61,36 @@
                 <span class="add">视频回放</span>
               </el-button>
               <el-button class="button_right">
-                <div class="icon_left1"></div>
-                视频回放
+                <span class="icon_left1"></span>
+                <span class="add1">视频回放</span>
               </el-button>
             </div>
             <!-- 开始时间 -->
             <div class="live_card_body_left_bottom_starttime">
               <div class="time_icon"></div>
-              <span>开始时间:</span>
-              <span>
-                <el-date-picker
-                  placeholder="请选择日期与时间"
-                  prefix-icon="prefix-icon-class"
-                  type="datetime"
-                ></el-date-picker>
-              </span>
+              <span> 开始时间:</span>
+              <el-date-picker
+                placeholder="请选择日期与时间"
+                prefix-icon="prefix-icon-class"
+                type="datetime"
+              ></el-date-picker>
             </div>
             <!-- 结束时间 -->
             <div class="live_card_body_left_bottom_endtime">
               <div class="time_icon1"></div>
               <span>结束时间:</span>
-              <span>
-                <el-date-picker
-                  placeholder="请选择日期与时间"
-                  prefix-icon="prefix-icon-class"
-                  type="datetime"
-                >
-                </el-date-picker>
-              </span>
+              <el-date-picker
+                placeholder="请选择日期与时间"
+                prefix-icon="prefix-icon-class"
+                type="datetime"
+              >
+              </el-date-picker>
             </div>
           </div>
         </div>
         <!-- 视频 -->
         <div class="live_card_body_right">
-          <LivePlayer></LivePlayer>
+          <LivePlayer aspect="fullscreen"></LivePlayer>
           <div class="video_button">
             <div class="video_buton_style">
               <div class="video_icon video_icon1"></div>
@@ -113,7 +111,7 @@
 <script>
 import LivePlayer from '@liveqing/liveplayer'
 export default {
-  name: 'MapPlayer',
+  name: 'videoMap',
   components: { LivePlayer },
   props: {
     videoUrl: {
@@ -202,6 +200,7 @@ export default {
         background-image: url(../../../assets/icon-hza/bg_left.png);
         background-size: 100% auto;
         background-repeat: no-repeat;
+        border-bottom: 3px solid #00539f;
         .live_card_body_left_top {
           width: 100%;
           height: 4vh;
@@ -212,6 +211,7 @@ export default {
           align-items: center;
           padding-left: 1vw;
           color: #bfe7f9;
+          font-size: 1.3rem;
         }
         .live_card_body_left_bottom {
           width: 100%;
@@ -226,7 +226,7 @@ export default {
             justify-content: space-around;
             .item {
               display: flex;
-              font-size: 1rem;
+              font-size: 1.2rem;
               color: #ecf4f9;
               letter-spacing: 0.1rem;
             }
@@ -260,9 +260,15 @@ export default {
               color: #fff;
               border-radius: 0%;
               border-color: #063d6c;
+              position: relative;
               &:hover {
                 background-color: #005ea1;
               }
+              .add {
+                position: absolute;
+                right: 2vw;
+                top: 1.1vh;
+              }
               .icon_left {
                 width: 1vw;
                 height: 2vh;
@@ -271,6 +277,7 @@ export default {
                 background-repeat: no-repeat;
                 display: inline-block;
                 margin-right: 0.5vw;
+                margin-right: 3vw;
               }
             }
             .button_right {
@@ -283,9 +290,16 @@ export default {
               color: #fff;
               border-radius: 0%;
               border-color: #063d6c;
+              position: relative;
               &:hover {
                 background-color: #005ea1;
               }
+              .add1 {
+                // background-color: #fff;
+                position: absolute;
+                right: 2vw;
+                top: 1.1vh;
+              }
               .icon_left1 {
                 width: 1vw;
                 height: 2vh;
@@ -294,6 +308,7 @@ export default {
                 margin-right: 0.5vw;
                 background-size: 100% auto;
                 background-repeat: no-repeat;
+                margin-right: 3vw;
               }
             }
           }
@@ -304,12 +319,14 @@ export default {
             margin-left: 1vw;
             display: flex;
             align-items: center;
-            justify-content: space-between;
+            // justify-content: space-between;
             color: #ecf4f9;
             position: relative;
+
             .el-input--suffix .el-input__inner {
               background-color: transparent;
               width: 15vw;
+              margin-left: 1vw;
             }
             .el-input--prefix .el-input__inner {
               border-color: #00539f;
@@ -322,13 +339,13 @@ export default {
               position: absolute;
               background-size: 100% auto;
               background-repeat: no-repeat;
-              right: 0.4vw;
+              right: 1vw;
             }
           }
           .live_card_body_left_bottom_endtime {
             display: flex;
             align-items: center;
-            justify-content: space-between;
+            // justify-content: space-between;
             width: 18vw;
             height: 4vh;
             margin-left: 1vw;
@@ -338,6 +355,7 @@ export default {
             .el-input--suffix .el-input__inner {
               background-color: transparent;
               width: 15vw;
+              margin-left: 1vw;
             }
             .el-input--prefix .el-input__inner {
               border-color: #00539f;
@@ -353,7 +371,7 @@ export default {
               position: absolute;
               background-size: 100% auto;
               background-repeat: no-repeat;
-              right: 0.4vw;
+              right: 1vw;
               top: 0.4vh;
             }
           }
@@ -366,12 +384,24 @@ export default {
         background-image: url(../../../assets/picture/bg_right.png);
         background-size: 100% auto;
         background-repeat: no-repeat;
+        border: 3px solid #00539f;
+        position: relative;
+        .video-wrapper .alt {
+          width: 51.5vw;
+          height: 59vh;
+          margin-left: 0.25vw;
+        }
         .video_button {
-          width: 52vw;
+          width: 15vw;
           height: 5vh;
-          display: flex;
-          justify-content: center;
-          align-items: center;
+          position: absolute;
+          left: 20vw;
+          bottom: 0vh;
+
+          // background-color: #fff;
+          // display: flex;
+          // justify-content: center;
+          // align-items: center;
           .video_buton_style {
             width: 13vw;
             height: 3.5vh;
@@ -403,7 +433,7 @@ export default {
               background-size: 100% auto;
               background-repeat: no-repeat;
               width: 2vw;
-              height: 4vh;
+              height: 4.5vh;
               margin-top: 0;
             }
             .video_icon5 {
diff --git a/src/views/videoMonitor/index.vue b/src/views/videoMonitor/index.vue
index d5048b2..4f07f65 100644
--- a/src/views/videoMonitor/index.vue
+++ b/src/views/videoMonitor/index.vue
@@ -19,22 +19,23 @@
         </div>
       </div>
     </div>
-    <div class="children">
-      <div class="coverage">
+    <div class="video_chose">
+      <div class="coverage_header">
         <p>图层</p>
       </div>
 
-      <div class="coveragebottom">
-        <el-checkbox label="" class="checkbox" size="mini">全选</el-checkbox>
-        <div class="hander">
-          <el-checkbox label="" size="mini" class="checkbox"
-            >沿海视频 （446）</el-checkbox
-          >
-          <div>
-            <el-checkbox label="" size="mini" class="checkbox"
-              >非沿海视频 （674）</el-checkbox
-            >
-          </div>
+      <div class="coveragebody">
+        <div class="header_title3">
+          <el-checkbox label="" class="checkbox" size="mini"> </el-checkbox>
+          <p>全选</p>
+        </div>
+        <div class="header_title1">
+          <el-checkbox label="" size="mini" class="checkbox"> </el-checkbox>
+          <p>沿海视频(446)</p>
+        </div>
+        <div class="header_title2">
+          <el-checkbox label="" size="mini" class="checkbox"> </el-checkbox>
+          <p>非沿海视频 (674)</p>
         </div>
       </div>
     </div>
@@ -162,18 +163,20 @@ export default {
     z-index: 1;
   }
 }
-.children {
-  width: 18vw;
+.video_chose {
+  width: 15vw;
   height: 89vh;
-  background-color: rgba(25, 64, 166, 0.5);
+  background-image: url(../../assets/icon-hza/frame.png);
+  background-size: 100% auto;
+  background-repeat: no-repeat;
   position: absolute;
   top: 10vh;
-  left: 2vh;
+  left: 1vh;
   z-index: 2;
   border-radius: 1vh;
   color: #fff;
 
-  .coverage {
+  .coverage_header {
     height: 4vh;
     align-self: center;
     display: flex;
@@ -181,24 +184,46 @@ export default {
     font-size: 1.5rem;
     border-bottom: 1px solid #fff;
     background: url('../../assets/icon-hza/bg_104.png');
-    background-size: 100% auto;
+    background-size: cover;
     background-repeat: no-repeat;
     padding-left: 3vw;
     padding-top: 2vh;
-    .checkbox {
-      padding-top: 1.5vh;
-      padding-left: 3vh;
-      color: #fff;
-    }
   }
-  .coveragebottom {
+  .coveragebody {
     width: 100%;
     height: 100%;
-    color: #fff;
+    padding-top: 1vh;
+    font-size: 1.2rem;
     .checkbox {
-      padding-top: 1.5vh;
-      padding-left: 2vw;
-      color: #fff;
+      margin-right: 0.5vw;
+    }
+    .header_title1 {
+      margin-left: 1.5vw;
+      width: 12vw;
+      height: 4vh;
+      background-image: url(../../assets/icon-hza/bg_25.png);
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      align-items: center;
+      display: flex;
+      margin-top: 1vh;
+      padding-left: 0.5vw;
+    }
+    .header_title2 {
+      width: 12vw;
+      padding-left: 0.5vw;
+      height: 4vh;
+      margin-left: 1.5vw;
+      background-image: url(../../assets/icon-hza/bg_25.png);
+      background-size: 100% auto;
+      background-repeat: no-repeat;
+      align-items: center;
+      display: flex;
+      margin-top: 1vh;
+    }
+    .header_title3 {
+      margin-left: 1.5vw;
+      display: flex;
     }
   }
 }
@@ -208,16 +233,19 @@ export default {
   position: absolute;
   top: 10vh;
   z-index: 2;
-  right: 8vh;
+  right: 2vw;
   .el-input__inner {
     background-color: #02427b;
     border-radius: 0;
     border: 1px solid #00f5ff;
+    border-right: 0;
     width: 13vw;
+    height: 4vh;
   }
   .buttonstyle {
     background-color: #03d6df;
     border-radius: 0%;
+    height: 4vh;
   }
 }
 </style>