视频监控、分页样式调整

src/assets/styles/element-ui.scss

@@ -660,6 +660,8 @@
 }
 
 .custom-input2 {
+  height: 32px;
+  line-height: 32px;
   position: relative;
   .el-input__wrapper {
     box-shadow: none;
@@ -739,43 +741,6 @@
 //  }
 //}
 
-.custom-pagination {
-  :deep(.el-pagination) {
-    .btn-next,
-    .btn-prev {
-      background-color: transparent;
-      border: none;
-      .el-icon {
-        font-size: 22px;
-        color: #a7ccdf;
-      }
-    }
-    .el-pager li {
-      width: 64px;
-      height: 64px;
-      line-height: 64px;
-      text-align: center;
-      font-size: 32px;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
-      &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
-      }
-    }
-    .el-pager li.is-active {
-      background-color: #038dff !important;
-      border: 1px solid #038dff !important;
-    }
-    :deep(.el-pagination__total) {
-      color: #a7ccdf;
-      font-size: 32px;
-    }
-  }
-}
-
 .common-date-picker {
   position: relative;
   height: 80px !important;

src/assets/styles/index.scss

@@ -536,8 +536,8 @@ aside {
 }
 
 .common-btn-primary {
-  width: 85px;
-  height: 50px;
+  width: 70px;
+  height: 45px;
   background: url('@/assets/images/common/btnPrimary.png') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
@@ -560,8 +560,8 @@ aside {
   font-size: 14px;
 }
 .common-btn-primary3 {
-  width: 244px;
-  height: 120px;
+  width: 104px;
+  height: 51px;
   background: url('@/assets/images/common/btnPrimary3.png') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
@@ -584,8 +584,8 @@ aside {
   font-size: 14px;
 }
 .common-btn-danger2{
-  width: 188px;
-  height: 56px;
+  width: 81px;
+  height: 24px;
   background: url('@/assets/images/common/btnDanger2.png') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
@@ -593,7 +593,7 @@ aside {
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  font-size: 38px;
+  font-size: 14px;
 }
 .common-btn {
   width: 59px;
@@ -699,7 +699,7 @@ aside {
   left: 50%;
   transform: translateX(-50%);
   color: #fff;
-  font-size: 38px;
+  font-size: 18px;
   z-index: 999;
   &::before {
     content: '';

src/components/NearbyVideos/index.vue

@@ -160,35 +160,35 @@ const handleClose = () => {
   margin-top: 10px;
   padding-right: 20px;
   :deep(.el-pagination__total) {
-    color: #a7ccdf;
-    font-size: 14px;
+    color: #a7ccdf !important;
   }
-
   :deep(.el-pagination) {
     .btn-next,
     .btn-prev {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
       .el-icon {
-        font-size: 16px;
-        color: #a7ccdf;
+        color: #a7ccdf !important;
       }
     }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent !important;
+      border: none !important;
+    }
     .el-pager li {
       text-align: center;
-      font-size: 14px;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
       &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
       }
     }
     .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
     }
   }
 }

src/hooks/AMap/useAMap.ts

@@ -93,6 +93,8 @@ export function useAMap(options) {
       context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
       context.marker.setContent(div);
       context.marker.on('click', (e) => {
+        const bounds = e.target.getBounds();
+        map.setZoomAndCenter(map.getZoom() + 1, bounds.getCenter());
       });
     };
     const _renderMarker = function (context) {
@@ -239,12 +241,12 @@ export function useAMap(options) {
       ];
       options.forEach((option) => {
         const holes = result.districtList[0].boundaries;
-        if (option.offset) {
-
-          holes.forEach((items) => {
-
-          })
-        }
+        // if (option.offset) {
+        //
+        //   holes.forEach((items) => {
+        //
+        //   })
+        // }
         let pathArray = [outer];
         pathArray.push.apply(pathArray, holes);
         const polygon = new AMap.Polygon({

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="video-card">
     <div class="common-title gradient-text">视频监控</div>
-<!--    <div class="more-btn" @click="showVideoMonitorList">{{ '查看更多>>' }}</div>-->
+    <div class="more-btn" @click="showVideoMonitorList">{{ '查看更多>>' }}</div>
     <div class="card-content video-list">
       <div v-for="(item, index) in listData" :key="index" class="video-box">
         <HKVideo :dot_data="item" :width="215" :height="94" />
@@ -14,11 +14,10 @@
   <Dialog v-model="showListDialog" type="xl" title="视频监控" class="dialog" hide-footer @close="reset">
     <div class="search-box">
       <div class="box-left">
-        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="200px" label-position="left">
+        <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="70px" label-position="left">
           <el-form-item label="实景视频" prop="eventType">
             <el-select
               v-model="queryParams.realisticVideoType"
-              size="large"
               class="custom-select"
               popper-class="custom-select-popper"
               :teleported="false"
@@ -33,8 +32,7 @@
               v-model="queryParams.name"
               class="custom-input2"
               placeholder="请输入摄像头名称"
-              size="large"
-              style="width: 500px"
+              style="width: 200px"
               @input="getList"
             />
           </el-form-item>
@@ -50,7 +48,7 @@
           <div v-for="(item, index) in editData" :key="index" class="box-item">
             <div class="edit-img">
               <span class="edit-title">{{ item.name }}</span>
-              <div class="close-btn" @click="deleteItem(index)">x</div>
+              <div class="close-btn" @click="deleteItem(index)"></div>
             </div>
           </div>
           <div class="flex" style="flex-direction: column; align-items: center">
@@ -286,6 +284,9 @@ initData();
   width: 100%;
   justify-content: space-between;
   align-items: center;
+  .el-form--inline .el-form-item {
+    margin-right: 15px;
+  }
 }
 .more-btn {
   position: absolute;
@@ -299,18 +300,18 @@ initData();
 .video-list2 {
   display: flex;
   flex-wrap: wrap;
-  padding: 0 20px;
+  padding: 0 10px;
   .video-box {
-    width: 790px;
-    height: 356px;
-    margin-right: 35.06px;
+    width: 288px;
+    height: 200px;
+    margin-right: 15px;
     cursor: pointer;
     cursor: pointer;
     background: url('@/assets/images/video/videoBg.png') no-repeat;
     background-size: 100% 100%;
     padding: 14.5px 9px;
     position: relative;
-    margin-bottom: 40px;
+    margin-bottom: 15px;
     position: relative;
     display: flex;
     flex-direction: column;
@@ -321,14 +322,15 @@ initData();
     }
     .video-label {
       position: absolute;
-      bottom: 17px;
-      right: 20px;
+      bottom: 8px;
+      right: 4px;
 
       display: flex;
       .label {
         width: 186px;
-        height: 22px;
-        line-height: 22px;
+        height: 24px;
+        padding-right: 5px;
+        line-height: 24px;
         font-size: 14px;
         white-space: nowrap;
         overflow: hidden;
@@ -342,23 +344,25 @@ initData();
         content: '';
         width: 0;
         height: 0;
-        border-bottom: 56px solid rgba(0, 0, 0, 0.4);
-        border-left: 56px solid transparent;
+        border-bottom: 24px solid rgba(0, 0, 0, 0.4);
+        border-left: 24px solid transparent;
       }
     }
   }
 }
 .img {
-  width: 750px;
-  height: 327px;
+  width: 278.5px;
+  height: 183px;
+  margin-left: 1px;
   background-color: #000;
+  background-color: #ff0000;
 }
 .active-tag {
   position: absolute;
-  top: 30px;
-  left: 30px;
-  width: 187px;
-  height: 56px;
+  top: 13px;
+  left: 10px;
+  width: 83px;
+  height: 25px;
   background: url('@/assets/images/video/indexTag.png') no-repeat;
   background-size: 100% 100%;
 }
@@ -367,21 +371,24 @@ initData();
   justify-content: center;
   align-items: center;
   border-radius: 8px;
-  padding: 5px 10px;
-  width: 1348px;
-  height: 193px;
+  padding: 3px 5px;
+  width: 545px;
+  height: 83px;
   background: url('@/assets/images/video/editBg.png') no-repeat;
   background-size: 100% 100%;
   position: absolute;
-  right: 45px;
-  top: 97px;
+  right: 20px;
+  top: 27px;
 }
 .box-item {
   position: relative;
-  margin-left: 20px;
+  margin-left: 8px;
+  &:first-child {
+    margin-left: 0;
+  }
   .edit-img {
-    width: 160px;
-    height: 160px;
+    width: 65px;
+    height: 65px;
     background-color: #000;
   }
   .edit-title {
@@ -392,59 +399,51 @@ initData();
     top: 0;
     right: 0;
     cursor: pointer;
-    width: 33px;
-    height: 33px;
+    width: 15px;
+    height: 15px;
     background: url('@/assets/images/video/close.png') no-repeat;
     background-size: 100% 100%;
     z-index: 1;
   }
 }
 .footer {
-  height: 64px;
+  height: 30px;
   display: flex;
   justify-content: flex-end;
   margin-bottom: 30px;
   .pagination-container {
-    height: 64px;
     margin: 0;
   }
   :deep(.el-pagination__total) {
-    color: #a7ccdf;
-    font-size: 32px;
+    color: #a7ccdf !important;
   }
   :deep(.el-pagination) {
     .btn-next,
     .btn-prev {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
       .el-icon {
-        font-size: 22px;
-        color: #a7ccdf;
+        color: #a7ccdf !important;
       }
     }
     .btn-prev:disabled,
     .btn-next:disabled {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
     }
     .el-pager li {
-      width: 64px;
-      height: 64px;
-      line-height: 64px;
       text-align: center;
-      font-size: 32px;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
       &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
       }
     }
     .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
     }
   }
 }
@@ -455,7 +454,7 @@ initData();
 .border {
   background-color: #15428d;
   width: 100%;
-  height: 4px;
+  height: 1px;
   margin-bottom: 30px;
 }
 .edit-icon {
@@ -464,8 +463,8 @@ initData();
   &::before {
     content: '';
     display: inline-block;
-    width: 41px;
-    height: 36px;
+    width: 18px;
+    height: 16px;
     background: url('@/assets/images/video/setting.png') no-repeat;
     background-size: 100% 100%;
     margin-right: 10px;
@@ -474,13 +473,18 @@ initData();
 .common-checked,
 .common-checked-active {
   position: absolute;
-  top: 30px;
-  right: 30px;
+  top: 13px;
+  right: 12px;
   z-index: 9;
 }
-.dialog {
-  :deep(.dialog-header) {
-    min-height: 150px;
+:deep(.el-form) {
+  .el-form-item__label {
+    color: #ffffff !important;
   }
 }
+//.dialog {
+//  :deep(.dialog-header) {
+//    min-height: 150px;
+//  }
+//}
 </style>

src/views/emergencyCommandMap/RightSection/RenWuDengJi.vue

@@ -153,45 +153,10 @@ onMounted(() => {
     height: 64px;
     margin: 0;
   }
-  :deep(.el-pagination__total) {
-    color: #a7ccdf;
-    font-size: 32px;
-  }
-  :deep(.el-pagination) {
-    .btn-next,
-    .btn-prev {
-      background-color: transparent;
-      border: none;
-      .el-icon {
-        font-size: 22px;
-        color: #a7ccdf;
-      }
-    }
-    .btn-prev:disabled,
-    .btn-next:disabled {
-      background-color: transparent;
-      border: none;
-    }
-    .el-pager li {
-      width: 64px;
-      height: 64px;
-      line-height: 64px;
-      text-align: center;
-      font-size: 32px;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
-      &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
-      }
-    }
-    .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
-    }
-  }
+  height: 30px;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 30px;
 }
 .flex {
   display: flex;

src/views/emergencyCommandMap/RightSection/RenWuGenZongInfo.vue

@@ -257,59 +257,44 @@ const closeDialog = () => {
 }
 
 .footer {
-  height: 64px;
+  height: 30px;
   display: flex;
   justify-content: flex-end;
   margin-bottom: 30px;
 
   .pagination-container {
-    height: 64px;
     margin: 0;
   }
-
   :deep(.el-pagination__total) {
-    color: #a7ccdf;
-    font-size: 32px;
+    color: #a7ccdf !important;
   }
-
   :deep(.el-pagination) {
     .btn-next,
     .btn-prev {
-      background-color: transparent;
-      border: none;
-
+      background-color: transparent !important;
+      border: none !important;
       .el-icon {
-        font-size: 22px;
-        color: #a7ccdf;
+        color: #a7ccdf !important;
       }
     }
-
     .btn-prev:disabled,
     .btn-next:disabled {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
     }
-
     .el-pager li {
-      width: 64px;
-      height: 64px;
-      line-height: 64px;
       text-align: center;
-      font-size: 32px;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
-
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
       &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
       }
     }
-
     .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
     }
   }
 }

src/views/globalMap/RightMenu/OnlinePlotting/index.vue

@@ -1051,38 +1051,35 @@ onMounted(() => {
   margin-top: 30px;
   padding-right: 40px;
   :deep(.el-pagination__total) {
-    color: #a7ccdf;
-    font-size: 32px;
+    color: #a7ccdf !important;
   }
-
   :deep(.el-pagination) {
     .btn-next,
     .btn-prev {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
       .el-icon {
-        font-size: 22px;
-        color: #a7ccdf;
+        color: #a7ccdf !important;
       }
     }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent !important;
+      border: none !important;
+    }
     .el-pager li {
-      width: 64px;
-      height: 64px;
-      line-height: 64px;
       text-align: center;
-      font-size: 32px;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
       &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
       }
     }
     .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
     }
   }
 }

src/views/globalMap/RightMenu/RainMonitor/RainRank.vue

@@ -314,33 +314,35 @@ const handleClick = (item) => {
   margin-top: 30px;
   padding-right: 40px;
   :deep(.el-pagination__total) {
-    color: #a7ccdf;
-    font-size: 14px;
+    color: #a7ccdf !important;
   }
-
   :deep(.el-pagination) {
     .btn-next,
     .btn-prev {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
       .el-icon {
-        color: #a7ccdf;
+        color: #a7ccdf !important;
       }
     }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent !important;
+      border: none !important;
+    }
     .el-pager li {
       text-align: center;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
       &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
       }
     }
     .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
     }
   }
 }

src/views/routineCommandMap/PositionMap.vue

@@ -355,34 +355,35 @@ function submit() {
     font-size: 14px;
   }
   :deep(.el-pagination__total) {
-    color: #a7ccdf;
-    font-size: 14px;
+    color: #a7ccdf !important;
   }
-
   :deep(.el-pagination) {
     .btn-next,
     .btn-prev {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
       .el-icon {
-        font-size: 12px;
-        color: #a7ccdf;
+        color: #a7ccdf !important;
       }
     }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent !important;
+      border: none !important;
+    }
     .el-pager li {
       text-align: center;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
       &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
       }
     }
     .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
     }
   }
 }

src/views/routineCommandMap/RightSection/EventReport/EventManage.vue

@@ -412,42 +412,35 @@ const enterCommand = (item) => {
     margin: 0;
   }
   :deep(.el-pagination__total) {
-    color: #a7ccdf;
-    font-size: 32px;
+    color: #a7ccdf !important;
   }
   :deep(.el-pagination) {
     .btn-next,
     .btn-prev {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
       .el-icon {
-        font-size: 22px;
-        color: #a7ccdf;
+        color: #a7ccdf !important;
       }
     }
     .btn-prev:disabled,
     .btn-next:disabled {
-      background-color: transparent;
-      border: none;
+      background-color: transparent !important;
+      border: none !important;
     }
     .el-pager li {
-      width: 64px;
-      height: 64px;
-      line-height: 64px;
       text-align: center;
-      font-size: 32px;
-      color: #a7ccdf;
-      background-color: #0e3064;
-      border: 1px solid #0c57a7;
-      margin: 0 6px;
+      color: #a7ccdf !important;
+      background-color: #0e3064 !important;
+      border: 1px solid #0c57a7 !important;
       &:hover {
-        background-color: #038dff;
-        border: 1px solid #038dff;
+        background-color: #038dff !important;
+        border: 1px solid #038dff !important;
       }
     }
     .el-pager li.is-active {
-      background-color: #038dff;
-      border: 1px solid #038dff;
+      background-color: #038dff !important;
+      border: 1px solid #038dff !important;
     }
   }
 }

src/views/routineCommandMap/RightSection/index.vue

@@ -168,7 +168,7 @@ onMounted(() => {
 .right-section {
   display: flex;
   flex-direction: column;
-  font-size: 36px;
+  font-size: 14px;
   width: 535px;
   height: 948px;
   background: url('@/assets/images/routineCommandMap/eventReport/dialog.png') no-repeat;