水库河道监测调整

src/components/HKVideo/video-container.vue

@@ -4,7 +4,7 @@
       <div class="tag" :title="videoData[0].name">
         <div class="name">{{ videoData[0].name }}</div>
       </div>
-      <HKVideo :dot_data="videoData[0]" :height="866" />
+      <HKVideo :dot_data="videoData[0]" />
     </div>
   </div>
   <div v-else-if="videoData.length >= 2 && videoData.length <= 4" class="video-container2">
@@ -12,7 +12,7 @@
       <div class="tag" :title="item.name">
         <div class="name">{{ item.name }}</div>
       </div>
-      <HKVideo :dot_data="item" :height="410" />
+      <HKVideo :dot_data="item" />
     </div>
   </div>
   <div v-else-if="videoData.length >= 5 && videoData.length <= 6" class="video-container3">
@@ -21,7 +21,7 @@
         <div class="tag" :title="videoData[0].name">
           <div class="name">{{ videoData[0].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[0]" :height="562" />
+        <HKVideo :dot_data="videoData[0]" />
       </div>
     </div>
     <div class="box2">
@@ -29,13 +29,13 @@
         <div class="tag" :title="videoData[1].name">
           <div class="name">{{ videoData[1].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[1]" :height="258" />
+        <HKVideo :dot_data="videoData[1]" />
       </div>
       <div class="video-item3">
         <div class="tag" :title="videoData[2].name">
           <div class="name">{{ videoData[2].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[2]" :height="258" />
+        <HKVideo :dot_data="videoData[2]" />
       </div>
     </div>
     <div class="box3">
@@ -43,19 +43,19 @@
         <div class="tag" :title="videoData[3].name">
           <div class="name">{{ videoData[3].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[3]" :height="258" />
+        <HKVideo :dot_data="videoData[3]" />
       </div>
       <div class="video-item">
         <div class="tag" :title="videoData[4].name">
           <div class="name">{{ videoData[4].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[4]" :height="258" />
+        <HKVideo :dot_data="videoData[4]" />
       </div>
       <div class="video-item">
         <div class="tag" :title="videoData[5].name">
           <div class="name">{{ videoData[5].name }}</div>
         </div>
-        <HKVideo :dot_data="videoData[5]" :height="258" />
+        <HKVideo :dot_data="videoData[5]" />
       </div>
     </div>
   </div>
@@ -64,7 +64,7 @@
       <div class="tag" :title="item.name">
         <div class="name">{{ item.name }}</div>
       </div>
-      <HKVideo :dot_data="item" :height="258" />
+      <HKVideo :dot_data="item" />
     </div>
   </div>
   <div v-else class="tip">附近没有可用监控视频</div>
@@ -81,7 +81,7 @@ const props = withDefaults(defineProps<Props>(), {});
 .video-container1 {
   width: 100%;
   height: 100%;
-  font-size: 38px;
+  font-size: 16px;
   .video-item {
     width: 100%;
     height: 100%;
@@ -92,10 +92,10 @@ const props = withDefaults(defineProps<Props>(), {});
   flex-wrap: wrap;
   width: 100%;
   height: 100%;
-  font-size: 38px;
+  font-size: 16px;
   .video-item {
     width: calc(50% - 12px);
-    height: 432px;
+    height: 293px;
     margin-bottom: 12px;
     margin-right: 12px;
     &:nth-child(2n) {
@@ -108,23 +108,24 @@ const props = withDefaults(defineProps<Props>(), {});
   flex-wrap: wrap;
   width: 100%;
   height: 100%;
-  font-size: 38px;
+  font-size: 16px;
   .box1 {
     width: calc(66.66666% - 6px);
-    height: 596px;
+    height: 375px;
     margin-bottom: 12px;
     margin-right: 12px;
     .video-item2 {
       width: 100%;
       height: 100%;
+      padding-bottom: 20px;
     }
   }
   .box2 {
     width: calc(33.33333% - 6px);
-    height: 596px;
+    height: 360px;
     .video-item3 {
       width: 100%;
-      height: 292px;
+      height: 180px;
       margin-bottom: 12px;
       &:nth-child(2) {
         margin-top: 12px;
@@ -133,12 +134,12 @@ const props = withDefaults(defineProps<Props>(), {});
   }
   .box3 {
     width: 100%;
-    height: 292px;
+    height: 180px;
     display: flex;
   }
   .video-item {
     width: calc(33.33333% - 8px);
-    height: 292px;
+    height: 180px;
     margin-bottom: 12px;
     margin-right: 12px;
     &:nth-child(3n) {
@@ -152,10 +153,10 @@ const props = withDefaults(defineProps<Props>(), {});
   width: 100%;
   height: 100%;
   overflow-y: auto;
-  font-size: 38px;
+  font-size: 16px;
   .video-item {
     width: calc(33.33333% - 8px);
-    height: 292px;
+    height: 180px;
     margin-bottom: 12px;
     margin-right: 12px;
     &:nth-child(3n) {
@@ -166,7 +167,7 @@ const props = withDefaults(defineProps<Props>(), {});
 .tip {
   width: 100%;
   height: 100%;
-  font-size: 44px;
+  font-size: 18px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -177,25 +178,25 @@ const props = withDefaults(defineProps<Props>(), {});
   position: relative;
   background: url('@/assets/images/video/videoBg.png');
   background-size: 100% 100%;
-  padding: 17px;
+  padding: 15px 10px 12px 10px;
   .tag {
     position: absolute;
-    bottom: 17px;
-    right: 17px;
+    bottom: 15px;
+    right: 10px;
     color: #fff;
     z-index: 11;
-    width: 425px;
-    height: 75px;
-    background: url('@/assets/images/video/tag2.png') no-repeat;
+    width: 179px;
+    height: 22px;
+    background: url('@/assets/images/video/tag.png') no-repeat;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     .name {
-      width: 360px;
+      width: 140px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
-      text-align: left;
+      text-align: right;
       padding-right: 5px;
     }
   }

src/views/globalMap/RightMenu/ReservoirMonitor.vue

@@ -34,7 +34,7 @@
       </div>
     </div>
   </div>
-  <Dialog v-model="showDialog" type="lg" title="水库监测" hide-footer>
+  <Dialog v-model="showDialog" type="xl" title="水库监测" hide-footer>
     <div class="flex">
       <div class="detail-container">
         <div class="flex">
@@ -56,7 +56,7 @@
           <div class="flex-box2">
             <div class="title2">水位过程图</div>
           </div>
-          <Chart :option="chartOption1" style="width: 100%; height: 400px" />
+          <Chart :option="chartOption1" style="width: 100%; height: 300px" />
         </div>
         <div class="table-wrap">
           <div class="table-title">
@@ -83,8 +83,10 @@
         </div>
       </div>
       <div class="right-box">
-        <div class="flex-box2">
-          <div class="title2">附近视频</div>
+        <div style="display: flex; align-items: center">
+          <div class="flex-box2">
+            <div class="title2">附近视频</div>
+          </div>
           <el-select v-model="queryParams2.radius" class="custom-select" popper-class="custom-popper" :teleported="false" style="width: 210px">
             <el-option v-for="item in radiusOption" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
@@ -214,7 +216,8 @@ const getVideoList = () => {
   color: #ffffff;
 }
 .detail-container {
-  font-size: 36px;
+  font-size: 16px;
+  padding: 0;
   .dialog-content {
     display: flex;
   }
@@ -277,23 +280,24 @@ const getVideoList = () => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  height: 1009px;
   .flex-box2 {
-    height: 54px;
     background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
-    padding-left: 65px;
+    background-size: 135px 20px;
+    padding-left: 28px;
+
     display: flex;
     align-items: center;
     .title2 {
-      font-size: 44px;
+      font-size: 16px;
       flex-shrink: 0;
-      margin-right: 30px;
+      margin-right: 10px;
       color: #f4f7fa;
+      padding-bottom: 23px;
     }
   }
   .video-box {
-    margin-top: 30px;
-    height: 900px;
+    margin-top: 10px;
+    height: 565px;
     display: flex;
     flex-wrap: wrap;
   }
@@ -413,17 +417,40 @@ const getVideoList = () => {
   }
 }
 
-.custom-select {
-  width: 148px;
-  height: 38px;
-  line-height: 38px;
-  :deep(.el-select__wrapper) {
-    background-color: #081b41;
-    box-shadow: 0 0 0 1px #126cf7 inset;
+.table-wrap {
+  width: 540px;
+  height: 280px;
+  // margin-top: 10px;
+  font-size: 14px;
+  background-color: #102043;
+  color: #fff;
+  .table-title {
+    min-height: 30px;
+    display: flex;
+    align-items: center;
+    border-bottom: 2px solid #465979;
+    .title-item {
+      width: 195px;
+      text-align: center;
+      color: #4c97f6;
+    }
   }
-  :deep(.el-select__placeholder) {
-    font-size: 30px;
-    color: #eaf3fc;
+  .content-wrap {
+    height: 92%;
+    overflow-y: auto;
+    .content-item {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      height: 30px;
+      font-size: 14px;
+      margin-bottom: 5px;
+      background: #0b2b5a;
+      > div {
+        flex: 1;
+        text-align: center;
+      }
+    }
   }
 }
 </style>

src/views/globalMap/RightMenu/RiverMonitor.vue

@@ -73,13 +73,15 @@
         <div>
           <div class="box2">
             <div class="box2-title">过去24小时河流水位变化图</div>
-            <Chart :option="chartOption2" style="width: 100%; height: 500px" />
+            <Chart :option="chartOption2" style="width: 100%; height: 400px" />
           </div>
         </div>
       </div>
       <div class="right-box">
-        <div class="flex-box2">
-          <div class="title2">附近视频</div>
+        <div style="display: flex; align-items: center">
+          <div class="flex-box2">
+            <div class="title2">附近视频</div>
+          </div>
           <el-select v-model="queryParams2.radius" class="custom-select" popper-class="custom-popper" :teleported="false" style="width: 210px">
             <el-option v-for="item in radiusOption" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
@@ -211,61 +213,68 @@ const handleShowDialog = (row) => {
   color: #ffffff;
 }
 .detail-container {
-  font-size: 36px;
+  font-size: 16px;
+  padding: 0;
   .dialog-content {
     display: flex;
   }
   .info-box {
-    width: 834px;
-    height: 459px;
+    width: 260px;
+    height: 200px;
     background: url('@/assets/images/map/rightMenu/box2.png') no-repeat;
+    background-size: 100% 100%;
     padding: 11px;
     .info-header {
-      width: 311px;
-      height: 56px;
-      padding-left: 50px;
+      width: 167px;
+      height: 30px;
+      padding-left: 25px;
+      padding-top: 5px;
       background: url(@/assets/images/map/rightMenu/titleBox1.png) no-repeat;
+      background-size: 100% 100%;
       .info-title {
-        font-size: 44px;
+        font-size: 18px;
       }
     }
     .info-content {
-      padding: 0 37px 26px 37px;
-      font-size: 38px;
+      padding: 0 10px 6px 10px;
+      font-size: 16px;
       color: #a8ccde;
     }
     .info-item {
       display: flex;
       align-items: center;
-      height: 72px;
+      padding: 5px 0;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
   .box1 {
-    width: 776px;
-    height: 459px;
+    width: 260px;
+    height: 200px;
     display: flex;
     flex-direction: column;
-    margin-left: 94px;
-    margin-right: 110px;
+    margin-left: 10px;
+    margin-right: 10px;
     .box1-title {
-      width: 372px;
-      height: 54px;
-      background: url('@/assets/images/map/rightMenu/titleBox2.png');
-      padding-left: 65px;
-      font-size: 44px;
+      height: 27px;
+      background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
+      background-size: 135px 20px;
+      padding-left: 28px;
+      font-size: 16px;
       color: #f4f7fa;
     }
   }
   .box2 {
-    margin-top: 20px;
+    width: 530px;
+    margin-top: 10px;
+    margin-right: 10px;
     .box2-title {
-      height: 60px;
+      height: 27px;
       background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
-      padding-left: 65px;
-      font-size: 44px;
+      background-size: 135px 20px;
+      padding-left: 28px;
+      font-size: 16px;
       color: #f4f7fa;
     }
   }
@@ -274,23 +283,24 @@ const handleShowDialog = (row) => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  height: 1009px;
   .flex-box2 {
-    height: 54px;
     background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
-    padding-left: 65px;
+    background-size: 135px 20px;
+    padding-left: 28px;
+
     display: flex;
     align-items: center;
     .title2 {
-      font-size: 44px;
+      font-size: 16px;
       flex-shrink: 0;
-      margin-right: 30px;
+      margin-right: 10px;
       color: #f4f7fa;
+      padding-bottom: 23px;
     }
   }
   .video-box {
-    margin-top: 30px;
-    height: 900px;
+    margin-top: 10px;
+    height: 565px;
     display: flex;
     flex-wrap: wrap;
   }
@@ -410,17 +420,17 @@ const handleShowDialog = (row) => {
   }
 }
 
-.custom-select {
-  width: 148px;
-  height: 38px;
-  line-height: 38px;
-  :deep(.el-select__wrapper) {
-    background-color: #081b41;
-    box-shadow: 0 0 0 1px #126cf7 inset;
-  }
-  :deep(.el-select__placeholder) {
-    font-size: 30px;
-    color: #eaf3fc;
-  }
-}
+//.custom-select {
+//  width: 148px;
+//  height: 38px;
+//  line-height: 38px;
+//  :deep(.el-select__wrapper) {
+//    background-color: #081b41;
+//    box-shadow: 0 0 0 1px #126cf7 inset;
+//  }
+//  :deep(.el-select__placeholder) {
+//    font-size: 30px;
+//    color: #eaf3fc;
+//  }
+//}
 </style>

src/views/globalMap/RightMenu/echartOptions.ts

@@ -5,11 +5,17 @@ import dotImg from '@/assets/images/map/rightMenu/layerAnalysis/dot.png';
 import dotImg2 from '@/assets/images/map/rightMenu/ironTower/dot.png';
 // 降雨过程实况
 export const option1 = {
+  grid: {
+    top: '10px',
+    left: '40px',
+    right: '20px',
+    bottom: '20px'
+  },
   xAxis: {
     type: 'category',
     axisLabel: {
       color: '#A8CCDE',
-      fontSize: 16
+      fontSize: 14
     },
     axisTick: false,
     data: []
@@ -22,7 +28,7 @@ export const option1 = {
     },
     axisLabel: {
       color: '#A8CCDE',
-      fontSize: 16
+      fontSize: 14
     }
   },
   series: [
@@ -30,8 +36,8 @@ export const option1 = {
       //柱底圆片
       name: '',
       type: 'pictorialBar',
-      symbolSize: [30, 20],
-      symbolOffset: [0, 10],
+      symbolSize: [10, 6],
+      symbolOffset: [0, 3],
       z: 13,
       itemStyle: {
         color: 'rgba(50, 96, 225, 0.4)'
@@ -42,7 +48,7 @@ export const option1 = {
     {
       name: '',
       type: 'bar',
-      barWidth: 30,
+      barWidth: 10,
       barGap: '0%',
       itemStyle: {
         color: {
@@ -70,8 +76,8 @@ export const option1 = {
     {
       name: '',
       type: 'pictorialBar',
-      symbolSize: [30, 20],
-      symbolOffset: [0, -10],
+      symbolSize: [10, 6],
+      symbolOffset: [0, -3],
       z: 12,
       symbolPosition: 'end',
       itemStyle: {
@@ -97,7 +103,7 @@ export const option2 = {
     top: 50,
     left: 20,
     right: 20,
-    bottom: 20,
+    bottom: '40px',
     containLabel: true
   },
   xAxis: [
@@ -162,7 +168,7 @@ export const option2 = {
       type: 'line',
       symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
       showAllSymbol: true,
-      symbolSize: 20,
+      symbolSize: 8,
       smooth: true,
       areaStyle: {
         //区域填充样式