Hwf 10 місяців тому
батько
коміт
afc8eb595e

BIN
src/assets/images/map/rightMenu/dialog.png


BIN
src/assets/images/video/videoBg.png


+ 22 - 0
src/assets/styles/element-ui.scss

@@ -147,3 +147,25 @@
 .el-form--inline .el-input {
   width: 240px;
 }
+
+.custom-popper {
+  background: #081b41;
+  border: 1px solid #126cf7;
+  .el-select-dropdown__item {
+    font-size: 30px;
+    color: #eaf3fc;
+    &:hover {
+      color: #126cf7;
+      font-weight: normal;
+      background: #081b41;
+    }
+  }
+  .el-select-dropdown__item.is-hovering {
+    background: #081b41;
+  }
+  .el-select-dropdown__item.is-selected {
+    color: #126cf7;
+    font-weight: normal;
+    background: #081b41;
+  }
+}

+ 18 - 14
src/components/HKVideo/video-container.vue

@@ -2,51 +2,51 @@
   <div v-if="videoData.length === 1" class="video-container1 ">
     <div class="video-item">
       <div class="name">{{ videoData[0].name }}</div>
-      <HKVideo :dot_data="videoData[0]" :height="900" />
+      <HKVideo :dot_data="videoData[0]" :height="866" />
     </div>
   </div>
   <div v-else-if="videoData.length >= 2 && videoData.length <= 4" class="video-container2">
     <div v-for="(item, index) in videoData" :key="index" class="video-item">
       <div class="name">{{ item.name }}</div>
-      <HKVideo :dot_data="item" :height="444" />
+      <HKVideo :dot_data="item" :height="410" />
     </div>
   </div>
   <div v-else-if="videoData.length >= 5 && videoData.length <= 6" class="video-container3">
     <div class="box1">
       <div class="video-item2">
         <div class="name">{{ videoData[0].name }}</div>
-        <HKVideo :dot_data="videoData[0]" :height="596" />
+        <HKVideo :dot_data="videoData[0]" :height="562" />
       </div>
     </div>
     <div class="box2">
       <div class="video-item3">
         <div class="name">{{ videoData[1].name }}</div>
-        <HKVideo :dot_data="videoData[1]" :height="292" />
+        <HKVideo :dot_data="videoData[1]" :height="258" />
       </div>
       <div class="video-item3">
         <div class="name">{{ videoData[2].name }}</div>
-        <HKVideo :dot_data="videoData[2]" :height="292" />
+        <HKVideo :dot_data="videoData[2]" :height="258" />
       </div>
     </div>
     <div class="box3">
       <div class="video-item">
         <div class="name">{{ videoData[3].name }}</div>
-        <HKVideo :dot_data="videoData[3]" :height="292" />
+        <HKVideo :dot_data="videoData[3]" :height="258" />
       </div>
       <div class="video-item">
         <div class="name">{{ videoData[4].name }}</div>
-        <HKVideo :dot_data="videoData[4]" :height="292" />
+        <HKVideo :dot_data="videoData[4]" :height="258" />
       </div>
       <div class="video-item">
         <div class="name">{{ videoData[5].name }}</div>
-        <HKVideo :dot_data="videoData[5]" :height="292" />
+        <HKVideo :dot_data="videoData[5]" :height="258" />
       </div>
     </div>
   </div>
   <div v-else-if="videoData.length >= 7" class="video-container4">
     <div v-for="(item, index) in videoData" :key="index" class="video-item">
       <div class="name">{{ item.name }}</div>
-      <HKVideo :dot_data="item" :height="292" />
+      <HKVideo :dot_data="item" :height="258" />
     </div>
   </div>
   <div v-else class="tip">附近没有可用监控视频</div>
@@ -56,8 +56,7 @@
 interface Props {
   videoData: any[];
 }
-const props = withDefaults(defineProps<Props>(), {
-});
+const props = withDefaults(defineProps<Props>(), {});
 </script>
 
 <style lang="scss" scoped>
@@ -150,12 +149,17 @@ const props = withDefaults(defineProps<Props>(), {
   justify-content: center;
   align-items: center;
 }
-.video-item, .video-item2, .video-item3 {
+.video-item,
+.video-item2,
+.video-item3 {
   position: relative;
+  background: url('@/assets/images/video/videoBg.png');
+  background-size: 100% 100%;
+  padding: 17px;
   .name {
     position: absolute;
-    top: 10px;
-    left: 10px;
+    bottom: 17px;
+    right: 17px;
     color: #fff;
     z-index: 11;
   }

+ 13 - 12
src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="video-card">
-    <div class="title gradient-text">视频监控</div>
+    <div class="title gradient-text">视频监控22</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">
@@ -204,7 +204,8 @@ const handleSave = () => {
       height: 356px;
       margin-right: 35.06px;
       cursor: pointer;
-      background: url('@/assets/images/emergencyCommandMap/videoBg.png') no-repeat 100% 100%;
+      background: url('@/assets/images/emergencyCommandMap/videoBg.png') no-repeat;
+      background-size: 100% 100%;
       padding: 14.5px 9px;
       &:nth-child(1),
       &:nth-child(2),
@@ -215,6 +216,16 @@ const handleSave = () => {
       &:nth-child(6) {
         margin-right: 0;
       }
+      .video-content {
+        width: 100%;
+        height: 100%;
+        background: url('@/assets/images/emergencyCommandMap/videoBox2.png') no-repeat;
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+      }
       .video-label {
         position: absolute;
         bottom: 0;
@@ -281,16 +292,6 @@ const handleSave = () => {
     display: flex;
     flex-direction: column;
     align-items: center;
-    .video-content {
-      width: 776px;
-      height: 327px;
-      background: url('@/assets/images/emergencyCommandMap/videoBox2.png') no-repeat;
-      background-size: 100% 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-    }
     .video-label {
       width: 100%;
       height: 50px;

+ 6 - 5
src/views/globalMap/RightMenu/Dialog.vue

@@ -3,9 +3,7 @@
     <div class="dialog">
       <div class="dialog-header">
         <div class="gradient-text dialog-title">{{ title }}</div>
-        <div class="icon-close" @click="closeDialog">
-          <el-icon size="40px"><Close /></el-icon>
-        </div>
+        <div class="icon-close" @click="closeDialog"></div>
       </div>
       <div class="dialog-content">
         <slot />
@@ -64,8 +62,11 @@ const closeDialog = () => {
     .icon-close {
       cursor: pointer;
       position: absolute;
-      top: 8px;
-      right: -35px;
+      top: 0px;
+      right: -33px;
+      width: 64px;
+      height: 60px;
+      background: url('@/assets/images/map/rightMenu/close.png');
     }
   }
   .dialog-content {

+ 54 - 9
src/views/globalMap/RightMenu/RiverMonitor.vue

@@ -63,18 +63,20 @@
           </div>
           <div class="box1">
             <div class="box1-title">降雨过程实况</div>
-            <Chart :option="chartOption1" style="width: 100%; flex: 1;" />
+            <Chart :option="chartOption1" style="width: 100%; flex: 1" />
           </div>
         </div>
         <div>
-          <div>过去24小时河流水位变化图</div>
-          <Chart :option="chartOption2" style="width: 1200px; height: 500px" />
+          <div class="box2">
+            <div class="box2-title">过去24小时河流水位变化图</div>
+            <Chart :option="chartOption2" style="width: 100%; height: 500px" />
+          </div>
         </div>
       </div>
       <div class="right-box">
-        <div class="flex" style="width: 100%; align-items: center">
-          <div style="font-size: 44px; flex-shrink: 0; margin-right: 10px">附近视频</div>
-          <el-select v-model="queryParams2.radius" size="large" style="width: 150px">
+        <div class="flex-box2">
+          <div class="title2">附近视频</div>
+          <el-select v-model="queryParams2.radius" class="custom-select" popper-class="custom-popper" :teleported="false">
             <el-option v-for="item in radiusOption" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </div>
@@ -190,8 +192,13 @@ const handleShowDialog = (row) => {
         time.push(parseTime(item.time, '{h}'));
         resultData.push(item.water_level);
       });
+      let warning = [];
+      resultData.forEach(() => {
+        warning.push(resultData[0] * 1.5);
+      });
       chartOption2.value.xAxis[0].data = time;
       chartOption2.value.series[0].data = resultData;
+      chartOption2.value.series[1].data = warning;
       // chartOption2.value.series[0].markLine.data[0].yAxis = row.warningLevel;
     });
     queryParams2.location = `POINT(${row.longitude} ${row.latitude})`;
@@ -249,6 +256,18 @@ const handleShowDialog = (row) => {
       height: 54px;
       background: url('@/assets/images/map/rightMenu/titleBox2.png');
       padding-left: 65px;
+      font-size: 44px;
+      color: #f4f7fa;
+    }
+  }
+  .box2 {
+    margin-top: 45px;
+    .box2-title {
+      height: 54px;
+      background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
+      padding-left: 65px;
+      font-size: 44px;
+      color: #f4f7fa;
     }
   }
 }
@@ -256,9 +275,20 @@ const handleShowDialog = (row) => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background-color: #d7d7d7;
-  padding: 10px;
   height: 1009px;
+  .flex-box2 {
+    height: 54px;
+    background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat;
+    padding-left: 65px;
+    display: flex;
+    align-items: center;
+    .title2 {
+      font-size: 44px;
+      flex-shrink: 0;
+      margin-right: 30px;
+      color: #f4f7fa;
+    }
+  }
   .video-box {
     margin-top: 30px;
     height: 900px;
@@ -374,7 +404,22 @@ const handleShowDialog = (row) => {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
   }
   .text-danger {
-    background-image: linear-gradient(to bottom, #ffffff 50%, #FF2F3C 100%);
+    background-image: linear-gradient(to bottom, #ffffff 50%, #ff2f3c 100%);
   }
 }
+
+.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>

+ 17 - 2
src/views/globalMap/RightMenu/echartOptions.ts

@@ -82,9 +82,13 @@ export const option1 = {
 // 过去24小时河流水位变化图
 export const option2 = {
   legend: {
+    type: 'plain',
     show: true,
-    top: true,
-    right: 100
+    textStyle: {
+      fontSize: '32',
+      color: '#A8CCDE'
+    },
+    data: ['警戒线', '河流水位']
   },
   xAxis: [
     {
@@ -144,6 +148,7 @@ export const option2 = {
   ],
   series: [
     {
+      name: '河流水位',
       type: 'line',
       symbol: 'circle', // 默认是空心圆(中间是白色的),改成实心圆
       showAllSymbol: true,
@@ -175,6 +180,16 @@ export const option2 = {
         }
       },
       data: []
+    },
+    {
+      name: '警戒线',
+      type: 'line',
+      symbol: 'none',
+      lineStyle: {
+        color: '#ff2b34',
+        type: 'dashed'
+      },
+      data: []
     }
   ]
 };

+ 1 - 1
src/views/globalMapPage/index.vue

@@ -3,7 +3,7 @@
     <div class="dashboard-container">
       <HeaderSection />
       <div class="dashboard-content">
-        <GlobalMap width="8798" height="2182" :containerScale="scale" />
+        <GlobalMap width="8798" height="2182" />
       </div>
       <FooterSection style="position: absolute; bottom: 0; left: 0" />
     </div>