摄像头弹窗组件

ruoyi-ui/src/views/JiHeExpressway/components/Video/index.vue

@@ -159,6 +159,7 @@ export default {
     height: 100%;
     max-height: 100%;
     max-width: 100%;
+    object-fit: fill;
   }
 
   .video-stream {

ruoyi-ui/src/views/JiHeExpressway/components/VideoMulti/index.vue

@@ -10,7 +10,7 @@
         dialogData.parseOtherConfig.ptzCtrl
       )
         " src="@screen/images/camera-control-icon.svg" width="18px" height="18px"
-        style="cursor: pointer;background-color: #0d5f79;" />
+        style="cursor: pointer;background-color: #0d5f79;margin-top: 3px" />
     </div>
 
     <Transition name="fade" mode="out-in">
@@ -136,16 +136,20 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-
+.video-pic .video-container:nth-child(2){
+  margin-right: 0px;
+}
 
 .video-container {
   position: relative;
   background-color: #000;
+  width: 100%;
   height: 100%;
+  margin-right: 15px;
   overflow: hidden;
   display: flex;
-  flex-direction: column;
   justify-content: center;
+  flex-direction:column;
   .fade-enter-active,
   .fade-leave-active {
     transition: opacity 0.24s ease;
@@ -161,6 +165,7 @@ export default {
     z-index: 999;
     display: flex;
     justify-content: space-between;
+    background-color: #145775;
     .radio {
       background: #265A70;
       border-radius: 41px 41px 41px 41px;
@@ -213,8 +218,10 @@ export default {
   .video-stream,
   img {
     height: 100%;
-    max-height: 100%;
+    max-height: 93%;
     max-width: 100%;
+    object-fit: fill;
+    box-sizing: border-box;
   }
 
   .video-stream {

ruoyi-ui/src/views/JiHeExpressway/pages/control/event/event/EventDetailDialog/index.vue

@@ -15,7 +15,7 @@
       <Form ref="FormConfigRef" :formList="formList" v-model="data" label-width="110px" />
       <!-- 视频组件 -->
       <div class="video-pic" v-if="['-1','-2'].indexOf(activeName) !== -1 && [1,2,5].indexOf(data.warningSource) !== -1">
-        <div style="display:flex;justify-content: space-between;align-items: center;position:relative;">
+        <div style="display:flex;justify-content: space-between;align-items: center;position:relative;width:100%;">
           <!-- 选择按钮-->
 <!--          <div class="radio">-->
 <!--            <span @click="videoClick('upCamera')" :class="{ active: realVideo === 'upCamera' }">菏泽</span>-->
@@ -43,7 +43,6 @@
             :pileNum="data.stakeMark"
             rangeIndex="upCamera"
             :showHeader="false"
-            style="width: 49%;margin-right: 2%"
           />
           <span>济南方向</span></div>
         <div class="item">
@@ -52,7 +51,6 @@
             :pileNum="data.stakeMark"
             rangeIndex="downCamera"
             :showHeader="false"
-            style="width: 49%;"
           />
           <span>菏泽方向</span></div>
       </div>
@@ -663,7 +661,7 @@ export default {
   align-items: center;
   .video-pic {
     display: flex;
-    height: 270px;
+    height: 260px;
     gap: 15px;
     flex-direction: row;
     width: 98%;
@@ -697,10 +695,10 @@ export default {
     }
   }
 }
-::v-deep .item-video {
+//::v-deep .item-video {
-  width: 49%;
+//  width: 49%;
-  height: 100%;
+//  height: 100%;
-}
+//}
 .radio {
       position: absolute;
       right: 10px;