路网视频、江湖河库、事件详情

src/assets/styles/index.scss

@@ -548,8 +548,8 @@ aside {
   font-size: 14px;
 }
 .common-btn-primary2 {
-  width: 332px;
-  height: 72px;
+  width: 148px;
+  height: 32px;
   background: url('@/assets/images/common/btnPrimary2.png') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
@@ -557,7 +557,7 @@ aside {
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  font-size: 38px;
+  font-size: 14px;
 }
 .common-btn-primary3 {
   width: 244px;
@@ -569,11 +569,11 @@ aside {
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  font-size: 38px;
+  font-size: 14px;
 }
 .common-btn-danger{
-  width: 268px;
-  height: 72px;
+  width: 119px;
+  height: 32px;
   background: url('@/assets/images/common/btnDanger.png') no-repeat;
   background-size: 100% 100%;
   color: #ffffff;
@@ -581,7 +581,7 @@ aside {
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  font-size: 38px;
+  font-size: 14px;
 }
 .common-btn-danger2{
   width: 188px;

src/components/Dialog/index.vue

@@ -216,6 +216,7 @@ const confirm = () => {
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    border-top: none;
   }
 }
 .triangle1,

src/components/TimeAxis/index.vue

@@ -403,8 +403,8 @@ onMounted(() => {
       cursor: pointer;
     }
     .playIcon {
-      width: 16px;
-      height: 16px;
+      width: 32px;
+      height: 32px;
       background: url('@/assets/images/timeAxis/play.png') no-repeat;
       background-size: 100% 100%;
       cursor: pointer;

src/views/globalMap/RightMenu/Reservoir.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="menu-content">
     <div class="container">
-      <div class="gradient-text title">江湖河库</div>
+      <div class="gradient-text common-dialog-title">江湖河库</div>
       <div class="box-left">
         <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" @input="initData">
           <template #prefix>
@@ -95,48 +95,43 @@ initData();
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
 }
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
-}
 .custom-table {
-  width: 1499px;
+  width: 550px;
   .table-content {
-    height: 880px;
+    height: 425px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 1499px;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    background-size: 100% 100%;
     display: flex;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
-    //margin-left: -23px;
+    background-size: 100% 100%;
     display: flex;
-    padding-right: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -152,7 +147,7 @@ initData();
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -163,13 +158,12 @@ initData();
 }
 .box-left {
   display: flex;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   .btn {
-    width: 140px;
-    min-width: 140px;
-    height: 56px;
+    width: 59px;
+    height: 23px;
     background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+    background-size: 100% 100%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -177,4 +171,55 @@ initData();
     margin-left: 20px;
   }
 }
+.box {
+  display: flex;
+  flex-wrap: wrap;
+  font-size: 14px;
+  .box-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 12px 63px 0 34px;
+    cursor: pointer;
+    width: 184px;
+    height: 43px;
+    background: url('@/assets/images/map/rightMenu/tag.png') no-repeat;
+    background-size: 100% 100%;
+    margin-left: -60px;
+    &:nth-child(1),
+    &:nth-child(5) {
+      margin-left: -10px;
+    }
+    &:hover {
+      background: url('@/assets/images/map/rightMenu/tagActive.png') no-repeat;
+      background-size: 100% 100%;
+    }
+    .text1 {
+      flex: 1;
+      color: #ffffff;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    .text2 {
+      font-family: 'BEBAS-1';
+      margin-left: 25px;
+      font-size: 14px;
+      color: #00e8ff;
+    }
+  }
+  .box-item-active {
+    background: url('@/assets/images/map/rightMenu/tagActive.png') no-repeat;
+    background-size: 100% 100%;
+  }
+}
+.title-box {
+  height: 27px;
+  background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat  bottom left;
+  background-size: 135px 20px;
+  padding-left: 28px;
+  font-size: 16px;
+  color: #f4f7fa;
+  display: flex;
+  align-items: center;
+}
 </style>

src/views/globalMap/RightMenu/RoadNetworkVideo.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="menu-content">
     <div class="container">
-      <div class="gradient-text title">路网视频</div>
+      <div class="gradient-text common-dialog-title">路网视频</div>
       <div class="box-left">
         <el-input v-model="queryParams.query.keyword" class="custom-input" placeholder="搜索" @input="initData">
           <template #prefix>
@@ -119,47 +119,43 @@ initData();
 
 <style lang="scss" scoped>
 .menu-content {
-  width: 1579px;
-  height: 1394px;
+  width: 574px;
+  height: 581px;
   background: url('@/assets/images/map/rightMenu/content.png') no-repeat;
-  padding: 130px 20px 20px 20px;
-  font-size: 36px;
+  background-size: 100% 100%;
+  padding: 60px 10px 10px 15px;
+  font-size: 14px;
   position: relative;
   color: #ffffff;
 }
-.title {
-  font-size: 60px;
-  position: absolute;
-  top: 30px;
-  left: 160px;
-}
 .custom-table {
-  width: 1499px;
+  width: 550px;
   .table-content {
-    height: 570px;
+    height: 290px;
     overflow-y: auto;
     overflow-x: hidden;
   }
   .th {
-    width: 1499px;
-    height: 151px;
     background: url('@/assets/images/map/rightMenu/th.png') no-repeat;
+    background-size: 100% 100%;
     display: flex;
-    padding: 20px;
+    padding: 7px 12px;
+    height: 32px;
   }
   .tr {
-    height: 139px;
     background: url('@/assets/images/map/rightMenu/td.png') no-repeat;
+    background-size: 100% 100%;
     display: flex;
-    padding: 20px;
+    padding: 7px 12px;
     &:hover {
       background: url('@/assets/images/map/rightMenu/td_checked.png') no-repeat;
+      background-size: 100% 100%;
     }
   }
   .td {
     flex: 1;
     color: #edfaff;
-    font-size: 38px;
+    font-size: 14px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -175,7 +171,7 @@ initData();
     font-family: 'YouSheBiaoTiHei';
     /* 设置线性渐变，从红色渐变到蓝色 */
     background-image: linear-gradient(to bottom, #ffffff 50%, #3075d3 100%);
-    font-size: 48px;
+    font-size: 14px;
   }
   .text-green {
     background-image: linear-gradient(to bottom, #ffffff 50%, #40c75f 100%);
@@ -186,13 +182,12 @@ initData();
 }
 .box-left {
   display: flex;
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   .btn {
-    width: 140px;
-    min-width: 140px;
-    height: 56px;
+    width: 59px;
+    height: 23px;
     background: url('@/assets/images/map/rightMenu/potentialFloodHazard/btn.png') no-repeat;
+    background-size: 100% 100%;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -203,20 +198,20 @@ initData();
 .box {
   display: flex;
   flex-wrap: wrap;
-  font-size: 38px;
+  font-size: 14px;
   .box-item {
     display: flex;
     justify-content: space-between;
-    padding: 35px 200px 0 105px;
+    padding: 12px 63px 0 34px;
     cursor: pointer;
-    width: 527px;
-    height: 120px;
+    width: 184px;
+    height: 43px;
     background: url('@/assets/images/map/rightMenu/tag.png') no-repeat;
     background-size: 100% 100%;
-    margin-left: -180px;
+    margin-left: -60px;
     &:nth-child(1),
     &:nth-child(5) {
-      margin-left: -30px;
+      margin-left: -10px;
     }
     &:hover {
       background: url('@/assets/images/map/rightMenu/tagActive.png') no-repeat;
@@ -224,7 +219,6 @@ initData();
     }
     .text1 {
       flex: 1;
-      font-size: 36px;
       color: #ffffff;
       overflow: hidden;
       white-space: nowrap;
@@ -243,17 +237,13 @@ initData();
   }
 }
 .title-box {
-  width: 370px;
-  height: 35px;
-  background-image: url('@/assets/images/map/rightMenu/rainMonitor/titleBox.png');
-  background-repeat: no-repeat;
-  background-position: bottom left;
-  padding-left: 50px;
+  height: 27px;
+  background: url('@/assets/images/map/rightMenu/titleBox2.png') no-repeat  bottom left;
+  background-size: 135px 20px;
+  padding-left: 28px;
+  font-size: 16px;
+  color: #f4f7fa;
   display: flex;
   align-items: center;
-  margin-bottom: 30px;
-  .gradient-text {
-    font-size: 44px;
-  }
 }
 </style>

src/views/globalMap/RightMenu/index.vue

@@ -333,13 +333,15 @@ defineExpose({ handleMenu, clickContractMenu, updateMenu, getMenuState });
   background: url('@/assets/images/map/rightMenu/icon5_checked.png') no-repeat;
 }
 .icon6 {
-  width: 89px;
-  height: 87px;
+  width: 27px;
+  height: 26px;
   background: url('@/assets/images/map/rightMenu/icon6.png') no-repeat;
+  background-size: 100% 100%;
   cursor: pointer;
 }
 .icon6_checked {
   background: url('@/assets/images/map/rightMenu/icon6_checked.png') no-repeat;
+  background-size: 100% 100%;
 }
 //
 .icon7 {

src/views/routineCommandMap/LeftSection/RealSituation.vue

@@ -25,10 +25,9 @@
             v-model="liveMapState.speed"
             placeholder="请选择"
             class="custom-select"
-            size="large"
             popper-class="custom-select-popper"
             :teleported="false"
-            style="width: 320px"
+            style="width: 100px"
           >
             <el-option v-for="item in speedList" :key="item.value" :label="item.name" :value="item.value" />
           </el-select>
@@ -214,7 +213,7 @@ onMounted(() => {
 }
 .img-box2 {
   width: 100%;
-  height: 1200px;
+  height: 300px;
   img {
     width: 100%;
     height: 100%;
@@ -226,8 +225,8 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  height: 120px;
-  font-size: 38px;
+  height: 55px;
+  font-size: 14px;
   .tool-left {
     display: flex;
     align-items: center;
@@ -239,21 +238,24 @@ onMounted(() => {
     display: flex;
     align-items: center;
     .prevIcon {
-      width: 69px;
-      height: 73px;
+      width: 18px;
+      height: 20px;
       background: url('@/assets/images/timeAxis/prev.png') no-repeat;
+      background-size: 100% 100%;
       cursor: pointer;
     }
     .playIcon {
-      width: 93px;
-      height: 93px;
+      width: 32px;
+      height: 32px;
       background: url('@/assets/images/timeAxis/play.png') no-repeat;
+      background-size: 100% 100%;
       cursor: pointer;
     }
     .nextIcon {
-      width: 69px;
-      height: 73px;
+      width: 18px;
+      height: 20px;
       background: url('@/assets/images/timeAxis/next.png') no-repeat;
+      background-size: 100% 100%;
       cursor: pointer;
     }
   }

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

@@ -15,106 +15,108 @@
       </div>
       <div v-if="detailData.del_flag === '0'" class="common-btn-danger" style="margin-left: 20px" @click="handleShowDeleteDialog">删除事件</div>
     </div>
-    <div class="common-title-box">基础信息</div>
-    <div class="form">
-      <div class="form-item">
-        <div class="text1">事件编号</div>
-        <div class="text2">{{ detailData.event_id }}</div>
-      </div>
-      <div class="form-item">
-        <div class="text1">事件类型</div>
-        <div class="text2">
-          <dict-tag :options="mm_event_type" :value="detailData.event_type" />
+    <div class="scroll-box">
+      <div class="common-title-box">基础信息</div>
+      <div class="form">
+        <div class="form-item">
+          <div class="text1">事件编号</div>
+          <div class="text2">{{ detailData.event_id }}</div>
         </div>
-      </div>
-      <div class="form-item">
-        <div class="text1">事件等级</div>
-        <div class="text2">
-          <dict-tag :options="mm_event_level" :value="detailData.event_level" />
-<!--          <el-icon style="margin-left: 20px; cursor: pointer" @click="handleEventLevelOpen"><Fold /></el-icon>-->
+        <div class="form-item">
+          <div class="text1">事件类型</div>
+          <div class="text2">
+            <dict-tag :options="mm_event_type" :value="detailData.event_type" />
+          </div>
         </div>
-      </div>
-      <div class="form-item">
-        <div class="text1">事件状态</div>
-        <div class="text2">
-          <dict-tag :options="mm_event_state" :value="detailData.event_status" />
+        <div class="form-item">
+          <div class="text1">事件等级</div>
+          <div class="text2">
+            <dict-tag :options="mm_event_level" :value="detailData.event_level" />
+            <!--          <el-icon style="margin-left: 20px; cursor: pointer" @click="handleEventLevelOpen"><Fold /></el-icon>-->
+          </div>
         </div>
-      </div>
-      <div class="form-item">
-        <div class="text1">事发地点</div>
-        <div class="text2">{{ detailData.address }}</div>
-      </div>
-      <div class="form-item">
-        <div class="text1">事发时间</div>
-        <div class="text2">{{ detailData.event_time }}</div>
-      </div>
-      <div class="form-item">
-        <div class="text1">上报时间</div>
-        <div class="text2">{{ detailData.report_time }}</div>
-      </div>
-      <div class="form-item">
-        <div class="text1">伤亡情况</div>
-        <div class="text2">
-          <div v-if="detailData.casualties == '0'" class="flex">
-            <span>未上报</span>
-<!--            <span class="link" style="margin-left: 20px" @click="uploadeCasualties">去上报</span>-->
+        <div class="form-item">
+          <div class="text1">事件状态</div>
+          <div class="text2">
+            <dict-tag :options="mm_event_state" :value="detailData.event_status" />
           </div>
-          <div v-if="detailData.casualties == '1'" class="flex">
-            <span>已上报</span>
+        </div>
+        <div class="form-item">
+          <div class="text1">事发地点</div>
+          <div class="text2">{{ detailData.address }}</div>
+        </div>
+        <div class="form-item">
+          <div class="text1">事发时间</div>
+          <div class="text2">{{ detailData.event_time }}</div>
+        </div>
+        <div class="form-item">
+          <div class="text1">上报时间</div>
+          <div class="text2">{{ detailData.report_time }}</div>
+        </div>
+        <div class="form-item">
+          <div class="text1">伤亡情况</div>
+          <div class="text2">
+            <div v-if="detailData.casualties == '0'" class="flex">
+              <span>未上报</span>
+              <!--            <span class="link" style="margin-left: 20px" @click="uploadeCasualties">去上报</span>-->
+            </div>
+            <div v-if="detailData.casualties == '1'" class="flex">
+              <span>已上报</span>
+            </div>
           </div>
         </div>
+        <div class="form-item">
+          <div class="text1">登记人</div>
+          <div class="text2">{{ detailData.reported_by }}</div>
+        </div>
+        <div class="form-item">
+          <div class="text1">登记时间</div>
+          <div class="text2">{{ detailData.report_time }}</div>
+        </div>
+        <div class="form-item">
+          <div class="text1">联系方式</div>
+          <div class="text2">{{ detailData.contact }}</div>
+        </div>
+        <div class="form-item">
+          <div class="text1">事件来源</div>
+          <div class="text2">{{ detailData.event_source }}</div>
+        </div>
       </div>
-      <div class="form-item">
-        <div class="text1">登记人</div>
-        <div class="text2">{{ detailData.reported_by }}</div>
-      </div>
-      <div class="form-item">
-        <div class="text1">登记时间</div>
-        <div class="text2">{{ detailData.report_time }}</div>
-      </div>
-      <div class="form-item">
-        <div class="text1">联系方式</div>
-        <div class="text2">{{ detailData.contact }}</div>
-      </div>
-      <div class="form-item">
-        <div class="text1">事件来源</div>
-        <div class="text2">{{ detailData.event_source }}</div>
+      <div class="common-title-box">事件概要</div>
+      <div v-if="!!detailData.event_description" class="text-box">{{ detailData.event_description }}</div>
+      <div class="common-title-box">事件跟踪</div>
+      <div style="padding: 20px 105px 30px 35px">
+        <Step :step-data="eventTrackState" style="width: 100%" />
       </div>
-    </div>
-    <div class="common-title-box">事件概要</div>
-    <div v-if="!!detailData.event_description" class="text-box">{{ detailData.event_description }}</div>
-    <div class="common-title-box">事件跟踪</div>
-    <div style="padding: 20px 105px 30px 35px">
-      <Step :step-data="eventTrackState" style="width: 100%" />
-    </div>
-    <div class="common-title-box">指挥记录</div>
-    <div class="info-content">
-      <div class="list">
-        <div class="list-item">
-          <i class="img" />
-          <div class="item-title">大屏指挥记录</div>
-        </div>
-        <div class="list-item">
-          <i class="img" />
-          <div class="item-title">中屏指挥记录</div>
+      <div class="common-title-box">指挥记录</div>
+      <div class="info-content">
+        <div class="list">
+          <div class="list-item">
+            <i class="img" />
+            <div class="item-title">大屏指挥记录</div>
+          </div>
+          <div class="list-item">
+            <i class="img" />
+            <div class="item-title">中屏指挥记录</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="common-title-box">匹配预案</div>
-    <div v-if="!!detailData.plan_name" class="info-content">
-      <div class="list">
-        <div class="list-item">
-          <i class="img" />
-          <div class="item-title">{{ detailData.plan_name }}</div>
+      <div class="common-title-box">匹配预案</div>
+      <div v-if="!!detailData.plan_name" class="info-content">
+        <div class="list">
+          <div class="list-item">
+            <i class="img" />
+            <div class="item-title">{{ detailData.plan_name }}</div>
+          </div>
         </div>
       </div>
-    </div>
-    <div class="common-title-box">事件总结报告</div>
-    <div v-if="!!summaryFiles && summaryFiles.length > 0" class="info-content">
-      <div class="list2">
-        <div v-for="(item, index) in summaryFiles" :key="index" class="list-item" @click="downloadSummaryFile(item.url)">
-          <div class="link">{{ item.file_name }}</div>
-          <el-icon class="icon"><Download /></el-icon>
+      <div class="common-title-box">事件总结报告</div>
+      <div v-if="!!summaryFiles && summaryFiles.length > 0" class="info-content">
+        <div class="list2">
+          <div v-for="(item, index) in summaryFiles" :key="index" class="list-item" @click="downloadSummaryFile(item.url)">
+            <div class="link">{{ item.file_name }}</div>
+            <el-icon class="icon"><Download /></el-icon>
+          </div>
         </div>
       </div>
     </div>
@@ -236,7 +238,7 @@ onMounted(() => {
   }
 }
 :deep(.dialog-content) {
-  margin-top: -80px;
+  margin-top: -20px;
 }
 .tip {
   :deep(.dialog-content) {
@@ -252,7 +254,7 @@ onMounted(() => {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  padding: 0 35px 30px;
+  padding: 0 15px 10px;
   .form-item {
     width: calc(25% - 15px);
     margin-left: 20px;
@@ -260,13 +262,13 @@ onMounted(() => {
       margin-left: 0;
     }
     .text1 {
-      font-size: 38px;
+      font-size: 14px;
       color: #8da1be;
-      line-height: 70px;
+      line-height: 30px;
     }
     .text2 {
-      font-size: 38px;
-      line-height: 70px;
+      font-size: 14px;
+      line-height: 30px;
       color: #ffffff;
       display: flex;
       align-items: center;
@@ -283,12 +285,12 @@ onMounted(() => {
     flex-direction: column;
     align-content: center;
     justify-content: center;
-    margin-right: 40px;
+    margin-right: 20px;
     cursor: pointer;
     position: relative;
     .img {
-      width: 476px;
-      height: 284px;
+      width: 251px;
+      height: 150px;
       background: url('@/assets/images/cardBg.png') no-repeat;
       background-size: 100% 100%;
       cursor: pointer;
@@ -327,4 +329,8 @@ onMounted(() => {
     }
   }
 }
+.scroll-box {
+  height: 600px;
+  overflow-y: auto;
+}
 </style>