电视墙

src/assets/styles/base.scss

@@ -92,6 +92,107 @@ $date-state3: #d6333b;
   width: 1200px !important;
   height: 800px !important;
 }
+.TVWallCustomWidth-right {
+  width: 1500px !important;
+  height: 750px !important;
+  background: #04080c !important;
+  box-shadow: $barShadow !important;
+  border: 1px $barBorder !important;
+
+  .el-dialog__header {
+    padding: 15px 20px !important;
+    background-image: -moz-linear-gradient($GradualGreen) !important;
+    background-image: -webkit-linear-gradient($GradualGreen) !important;
+    background-image: linear-gradient($GradualGreen) !important;
+    box-shadow: $shadowTitle !important;
+
+    .el-dialog__title {
+      font-weight: bolder !important;
+      color: #3cd7ef !important;
+    }
+  }
+
+  .leader-info-container {
+    // padding: .5rem;
+    display: flex;
+    height: 650px;
+    width: 28rem;
+    overflow-y: hidden;
+    flex-direction: column;
+    padding: 0 1rem;
+    float: right;
+
+    .leader-info-list-con {
+      width: 100%;
+      padding: 1rem;
+      margin-bottom: .5rem;
+      background-image: -moz-linear-gradient($GradualGreen) !important;
+      background-image: -webkit-linear-gradient($GradualGreen) !important;
+      background-image: linear-gradient($GradualGreen) !important;
+      border: solid 1px #7dc2eb;
+      box-shadow: $shadowListHover !important;
+      border-radius: 5px;
+
+      td {
+        margin: .4rem 0;
+        color: $white;
+        vertical-align: middle;
+      }
+      .td1 {
+        width: 6rem;
+      }
+      .td2 {
+        width: 15rem;
+      }
+      //.td-height-16{
+      //  height: 23px;
+      //}
+      //.td-height-14{
+      //  height: 26px;
+      //}
+      //.td-height-13{
+      //  height: 31px;
+      //}
+      //.td-height-12{
+      //  height: 35px;
+      //}
+      //.td-height-11{
+      //  height: 39px;
+      //}
+      //.td-height-7{
+      //  height: 52px;
+      //}
+      .td-height-16{
+        height: 38px;
+      }
+      .td-height-14{
+        height: 44px;
+      }
+      .td-height-13{
+        height: 47px;
+      }
+      .td-height-12{
+        height: 51px;
+      }
+      .td-height-11{
+        height: 54px;
+      }
+      .td-height-7{
+        height: 88px;
+      }
+      h4 {
+        margin: .4rem 0;
+        color: $white;
+      }
+    }
+
+    .leader-info-list-con:hover {
+      background-image: -moz-linear-gradient($popupBG) !important;
+      background-image: -webkit-linear-gradient($popupBG) !important;
+      background-image: linear-gradient($popupBG) !important;
+    }
+  }
+}
 
 //公共
 body {
@@ -3295,3 +3396,4 @@ div::-webkit-scrollbar {
 .el-message{
   z-index: 9999 !important;
 }
+

src/components/TVWalls.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog :title="title" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth"
+    <el-dialog :title="title" :visible.sync="TVWallVisible" v-if="TVWallVisible" customClass="TVWallCustomWidth1"
                @close="cancelEventLocationShow()">
       <!--<div @click="findCameraByEventCoordinate()">视频联动</div>-->
       <!--<div class="forthis" style="width: 22%; position: absolute;left: 0;z-index: 9999999999999;">-->
@@ -21,16 +21,18 @@
       <!--&lt;!&ndash;视频窗口展示-&#45;&#45;海康&ndash;&gt;-->
       <!--<div id="playWnd" class="playWnd" style="left: 0px; top: 0px;"></div>-->
       <!--</div>-->
-
+      <div style="display: flex;">
       <div id="dom1" class="dom1"></div>
         <div class="leader-info-container" v-if="this.detail!=null">
-          <!--          <img src="../../public/img-sample.png">-->
-          <table class="leader-info-list-con" style="height: 100%; margin-bottom: 0" border="1px solid #ccc" cellpadding="0" cellspacing="0" >
-            <div v-for="(value, key) in this.detail" :key="key">
-            <tr><td class="td1 td-height-7">{{value.name}}:</td><td class="td2 td-height-7">{{value.value}}</td></tr>
-            </div>
-          </table>
+          <el-descriptions  class="leader-info-list-con" style=" margin-bottom: 0" cellpadding="0" cellspacing="0"  :column='1' border>
+            <el-descriptions-item   v-for="item in this.detail"> <template slot="label">
+              <span> {{item.name}}</span>
+            </template>
+              {{item.value}}
+            </el-descriptions-item>
+          </el-descriptions>
         </div>
+      </div>
     </el-dialog>
   </div>
 
@@ -357,17 +359,10 @@ export default {
         strMap.set(k,obj[k]);
         if(!this.detailList.includes(k))
         {
-          let sroce={}
-          if (k=='经度')
-          {
-            sroce={
-              name:'经纬度',
-              value:obj['经度']+','+obj['纬度']
-            }
-          }else { sroce={
+          let sroce ={
             name:k,
             value:(obj[k]==null?'无':obj[k])
-          }}
+          }
 
           str.push(sroce)
         }
@@ -856,14 +851,13 @@ html, body {
   margin-top: 100px;
   margin-left: 80px;
 }
-//电视墙视频摄像头预览弹层样式chuanSet
-.TVWallCustomWidth {
+//电视墙视频摄像头预览弹层样式
+.TVWallCustomWidth1 {
   width: 1500px !important;
-  height: 800px !important;
+  height: 750px !important;
   background: #04080c !important;
   box-shadow: $barShadow !important;
   border: 1px $barBorder !important;
-
   .el-dialog__header {
     padding: 15px 20px !important;
     background-image: -moz-linear-gradient($GradualGreen) !important;
@@ -876,8 +870,7 @@ html, body {
       color: #3cd7ef !important;
     }
   }
-
-  .leader-info-container {
+  .leader-info-container{
     // padding: .5rem;
     display: flex;
     height: 650px;
@@ -885,28 +878,25 @@ html, body {
     overflow-y: scroll;
     flex-direction: column;
     padding: 0 1rem;
-
-    .leader-info-list-con {
+    .leader-info-list-con{
       width: 100%;
       padding: 1rem;
       margin-bottom: .5rem;
-      background-image: -moz-linear-gradient($GradualGreen) !important;
+      background-image: -moz-linear-gradient($GradualGreen)!important;
       background-image: -webkit-linear-gradient($GradualGreen) !important;
-      background-image: linear-gradient($GradualGreen) !important;
+      background-image: linear-gradient($GradualGreen)!important;
       border: solid 1px #7dc2eb;
       box-shadow: $shadowListHover !important;
       border-radius: 5px;
-
-      h4 {
+      h4{
         margin: .4rem 0;
         color: $white;
       }
     }
-
-    .leader-info-list-con:hover {
-      background-image: -moz-linear-gradient($popupBG) !important;
+    .leader-info-list-con:hover{
+      background-image: -moz-linear-gradient($popupBG)!important;
       background-image: -webkit-linear-gradient($popupBG) !important;
-      background-image: linear-gradient($popupBG) !important;
+      background-image: linear-gradient($popupBG)!important;
     }
   }
 }