弹窗调整、菜单、时间轴调整

src/api/system/menu/index.ts

@@ -11,6 +11,14 @@ export const listMenu = (query?: MenuQuery): AxiosPromise<MenuVO[]> => {
   });
 };
 
+export const listMenu2 = (query?: MenuQuery): AxiosPromise<MenuVO[]> => {
+  return request({
+    url: '/api/system/menu/qydt/getRouters',
+    method: 'get',
+    params: query
+  });
+};
+
 // 查询菜单详细
 export const getMenu = (menuId: string | number): AxiosPromise<MenuVO> => {
   return request({

src/assets/styles/index.scss

@@ -788,3 +788,13 @@ aside {
   left: 50px;
   font-size: 24px;
 }
+
+.dashboard-container {
+  ::-webkit-scrollbar-thumb {
+    background-color: #227dfe !important;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent !important;
+  }
+}

src/components/Dialog/index.vue

@@ -66,6 +66,8 @@ const computedWidth = computed(() => {
 const computedHeight = computed(() => {
   if (!!props.height) {
     return props.height;
+  } else {
+    return 'auto';
   }
   // else if (props.type === 'xs') {
   //   return '435px';
@@ -139,10 +141,10 @@ const confirm = () => {
     }
     .decoration {
       position: absolute;
-      top: 20px;
-      right: 130px;
-      width: 174px;
-      height: 38px;
+      top: 6px;
+      right: 26px;
+      width: 46px;
+      height: 10px;
       background: url('@/assets/images/common/decoration.png') no-repeat;
       background-size: 100% 100%;
       cursor: pointer;

src/components/TimeAxis/index.vue

@@ -40,8 +40,8 @@
         </div>
       </div>
     </div>
-    <Dialog v-model="timeAxisState.showDialog" title="气象图" hide-footer @close="dialogClose">
-      <img v-show="timeAxisState.activeIndex > -1" :src="timeAxisState.data[timeAxisState.activeIndex]?.img" style="width: 100%" />
+    <Dialog v-model="timeAxisState.showDialog" type="sm" title="气象图" hide-footer @close="dialogClose">
+      <img v-show="timeAxisState.activeIndex > -1" :src="timeAxisState.data[timeAxisState.activeIndex]?.img" style="width: 100%; height: 250px" />
     </Dialog>
   </div>
 </template>
@@ -191,8 +191,8 @@ const dialogClose = () => {
 
 // 拖拽的参数
 const dragState = reactive({
-  bottom: 180,
-  left: 200,
+  bottom: 40,
+  left: 10,
   dragging: false,
   startX: 20,
   startY: 20,
@@ -251,62 +251,69 @@ onMounted(() => {
   position: absolute;
   z-index: 2;
   color: #fff;
-  font-size: 16px;
-  height: 131px;
+  font-size: 14px;
+  height: 40px;
   display: flex;
   &::before {
     content: '';
     position: absolute;
     top: 50%;
-    left: -15px;
+    left: -6px;
     transform: translateY(-50%);
-    width: 9px;
-    height: 142px;
+    width: 3px;
+    height: 45px;
     background: url('@/assets/images/timeAxis/timeLeft.png') no-repeat;
     background-size: 100% 100%;
   }
   &::after {
     content: '';
     position: absolute;
-    top: 0;
-    right: -15px;
-    width: 9px;
-    height: 142px;
+    top: 50%;
+    right: -6px;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 45px;
     background: url('@/assets/images/timeAxis/timeRight.png') no-repeat;
+    background-size: 100% 100%;
   }
   .expand-btn {
-    width: 61px;
-    height: 131px;
+    width: 18px;
+    height: 40px;
     background: url('@/assets/images/timeAxis/timeBtn.png') no-repeat;
+    background-size: 100% 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0 16px;
     cursor: pointer;
-    font-size: 30px;
+    font-size: 12px;
   }
   .time-box {
-    width: 2640px;
-    height: 158px;
+    width: 668px;
+    height: 47px;
     background: url('@/assets/images/timeAxis/timeAxis.png') no-repeat;
+    background-size: 100% 100%;
     display: flex;
   }
   .time-picker-box {
-    width: 257px;
+    width: 100px;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    padding: 10px;
     :deep(.el-date-editor.el-input) {
-      width: 257px;
-      height: 50px;
-      font-size: 30px;
+      width: 100px;
+      height: 18px;
+      font-size: 12px;
+      &:first-child {
+        margin-top: -7px;
+      }
     }
     :deep(.el-input__wrapper) {
       background-color: transparent;
       border: unset;
       box-shadow: unset;
+      padding: 0 2px;
     }
     :deep(.el-input__inner) {
       color: #b5dbfc;
@@ -321,11 +328,18 @@ onMounted(() => {
     display: flex;
     align-items: flex-end;
     overflow-x: auto;
-    padding: 0 20px;
+    overflow-y: hidden;
+    padding: 0 8px;
+    -webkit-overflow-scrolling: touch; /* 在移动设备上启用平滑滚动 */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* Internet Explorer 10+ */
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari 和基于 WebKit 的浏览器 */
+    }
     .active {
       :deep(.el-timeline-item__node) {
         background-color: #ff0000;
-        box-shadow: 0 0 8px 8px #f68686;
+        box-shadow: 0 0 4px 4px #f68686;
       }
     }
     :deep(.el-timeline) {
@@ -333,10 +347,11 @@ onMounted(() => {
       align-items: center;
       width: 100%;
       height: 100%;
-      padding-top: 30px;
+      padding-left: 5px;
+      padding-top: 12px;
     }
     :deep(.el-timeline-item__tail) {
-      height: 13px;
+      height: 5px;
       //background-color: #1f54b6;
       background-image: linear-gradient(to bottom, #1064d6 10%, #1876be 50%, #1064d6 90%);
       width: 100%;
@@ -345,68 +360,69 @@ onMounted(() => {
     }
     :deep(.el-timeline-item__wrapper) {
       top: 10px;
-      left: -42px;
+      left: -11px;
       padding-left: 0;
     }
     :deep(.el-timeline-item__timestamp) {
-      font-size: 30px;
+      font-size: 12px;
       color: #ffffff;
       font-family: 'PingFang SC', sans-serif;
-      margin-top: 33px;
+      margin-top: 5px;
     }
     :deep(.el-timeline-item__node) {
       background-color: #ffffff;
-      box-shadow: 0 0 8px 8px #569eff;
-      width: 16px !important;
-      height: 16px !important;
+      box-shadow: 0 0 4px 4px #569eff;
+      width: 5px !important;
+      height: 5px !important;
+      top: 3px;
+      left: 3px;
     }
     :deep(.el-timeline-item) {
-      width: 120px;
-      min-width: 120px;
+      width: 46px;
+      min-width: 46px;
     }
   }
   .time-tool {
-    width: 457px;
+    width: 120px;
     display: flex;
     align-items: center;
     padding: 0 5px;
-    .tool-icon {
-      margin-right: 5px;
-      cursor: pointer;
-      font-size: 20px;
-    }
     .speed-btn {
       margin-right: 5px;
       color: #ffffff;
       cursor: pointer;
-      font-size: 40px;
-      padding-bottom: 10px;
+      font-size: 12px;
+      padding-bottom: 6px;
       font-family: 'PingFang SC', sans-serif;
     }
     .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: 16px;
+      height: 16px;
       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;
     }
     .rankIcon {
-      width: 104px;
-      height: 104px;
+      width: 20px;
+      height: 20px;
       background: url('@/assets/images/timeAxis/rank.png') no-repeat;
+      background-size: 100% 100%;
       cursor: pointer;
-      margin-left: 50px;
+      margin-left: 17px;
     }
   }
 }

src/views/emergencyCommandMap/LeftSection/index.vue

@@ -311,7 +311,7 @@ defineExpose({
   flex-direction: column;
   justify-content: space-between;
   font-size: 16px;
-  margin-right: 20px;
+  margin-right: 7px;
   .weather-card {
     width: 541px;
     height: 86px;

src/views/emergencyCommandMap/MiddleSection.vue

@@ -2,7 +2,7 @@
   <div class="middle-section">
     <div class="btn-box">
       <div class="btn" @click="handleQuery1">备战防御</div>
-      <div class="btn-active" style="margin-left: 40px">指挥调度</div>
+      <div class="btn-active" style="margin-left: 14px">指挥调度</div>
     </div>
     <GlobalMap />
     <slot />

src/views/emergencyCommandMap/RightSection/index.vue

@@ -171,7 +171,6 @@ const updatePlan = (data: { eventId: string }) => {
   font-size: 14px;
   padding-top: 57px;
   padding-bottom: 150px;
-  margin-left: 65px;
   .task-header {
     display: flex;
     justify-content: space-around; /* 使按钮在div内均匀分布 */

src/views/emergencyCommandMap/index.vue

@@ -112,11 +112,4 @@ onUnmounted(() => {
   height: 57px;
   cursor: pointer;
 }
-::-webkit-scrollbar-thumb {
-  background-color: #227dfe !important;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent !important;
-}
 </style>

src/views/globalMap/LeftMenu.vue

@@ -30,12 +30,11 @@
           <div class="menu-content">
             <div v-for="(item, index) in menuData[menuState.activeIndex]?.children" :key="index" class="content-box">
               <div class="box-header">
-                <div v-if="item.name === '防风防汛'" class="icon1" style="width: 79px; height: 87px"></div>
-                <div v-if="item.name === '危化品安全监测' || item.name === '危险化工品'" class="icon2"
-                     style="width: 71px; height: 80px"></div>
-                <div v-if="item.name === '其他'" class="icon3" style="width: 71px; height: 80px"></div>
-                <div v-if="item.name === '水情监测'" class="icon4" style="width: 71px; height: 80px"></div>
-                <div v-if="item.name === '自然灾害监测'" class="icon5" style="width: 71px; height: 80px"></div>
+                <div v-if="item.name === '防风防汛'" class="icon1" style="width: 24px; height: 26px"></div>
+                <div v-if="item.name === '危化品安全监测' || item.name === '危险化工品'" class="icon2" style="width: 23px; height: 26px"></div>
+                <div v-if="item.name === '其他'" class="icon3" style="width: 26px; height: 26px"></div>
+                <div v-if="item.name === '水情监测'" class="icon4" style="width: 29px; height: 26px"></div>
+                <div v-if="item.name === '自然灾害监测'" class="icon5" style="width: 25px; height: 26px"></div>
                 <div>{{ item.name }}</div>
                 <div :class="item.show ? 'expand-icon down-icon' : 'expand-icon up-icon'"
                      @click="changeBoxShow(item)"></div>
@@ -63,7 +62,7 @@
 
 <script lang="ts" setup>
 import { getPointInfoComprehensiveSearch } from '@/api/globalMap';
-import { listMenu } from '@/api/system/menu';
+import { listMenu, listMenu2 } from '@/api/system/menu';
 
 const emits = defineEmits(['switchMap', 'clickMenu', 'selectSearchMarker']);
 // 左侧菜单
@@ -125,7 +124,7 @@ const handleClick = (item) => {
 };
 
 const initData = () => {
-  listMenu().then((res: any) => {
+  listMenu2().then((res: any) => {
     const data = res.data ? res.data[0]?.children : [];
     data.forEach((item) => {
       item.show = true;
@@ -182,8 +181,8 @@ defineExpose({ setMenuChange });
 
 <style lang="scss" scoped>
 .search-box {
-  width: 815px;
-  height: 104px;
+  width: 260px;
+  height: 27px;
   padding: 0 10px;
   background: url('@/assets/images/menu/search.png') no-repeat;
   background-size: 100% 100%;
@@ -193,30 +192,29 @@ defineExpose({ setMenuChange });
     border: none;
     outline: none;
     color: #fff;
-    width: calc(100% - 85px);
-    margin-left: 85px;
-    height: 90px;
-    font-size: 46px;
+    width: calc(100% - 20px);
+    margin-left: 22px;
+    height: 22px;
+    font-size: 14px;
     background-color: transparent;
   }
 
   .search-list {
     position: absolute;
-    top: 100px;
+    top: 30px;
     left: 0;
     background-color: #0d1d4e;
-    border: 1px solid #2C81FF;
-    width: 815px;
-    color: #000;
-    font-size: 46px;
+    border: 1px solid #2c81ff;
+    width: 260px;
+    color: #00e8ff;
+    font-size: 24px;
     z-index: 9;
 
     .list-item {
       display: block;
-      font-size: 38px;
-      min-height: 80px;
+      font-size: 14px;
       cursor: pointer;
-      padding: 10px;
+      padding: 5px;
       color: #ffffff;
       &:hover {
         background-color: #0a6ebd;
@@ -226,18 +224,18 @@ defineExpose({ setMenuChange });
 }
 
 .menu-box {
-  width: 871px;
-  height: 1732px;
+  width: 280px;
+  height: 551px;
   margin-top: 10px;
   color: #fff;
   position: relative;
 
   .menu-box2 {
-    width: 871px;
-    height: 1732px;
+    width: 280px;
+    height: 551px;
     background: url('@/assets/images/menu/menu.png') no-repeat;
     background-size: 100% 100%;
-    padding: 10px 20px;
+    padding: 10px 20px 10px 24px;
   }
 
   .menu-btn {
@@ -246,10 +244,10 @@ defineExpose({ setMenuChange });
     left: 50%;
     transform: translateX(-50%);
     letter-spacing: 5px;
-    font-size: 48px;
+    font-size: 16px;
     cursor: pointer;
-    width: 379px;
-    height: 60px;
+    width: 125px;
+    height: 20px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -259,58 +257,51 @@ defineExpose({ setMenuChange });
 
   .menu-header {
     display: flex;
-    margin-top: 65px;
-    height: 78px;
+    margin-top: 15px;
+    height: 28px;
 
     .menu-item {
-      width: 339px;
-      height: 78px;
+      width: 87px;
+      height: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      letter-spacing: 5px;
       &:hover {
         position: relative;
-        background: url('@/assets/images/menu/menuActive.png') no-repeat;
+        background: url('@/assets/images/menu/menuActive.png') no-repeat bottom center;
         background-size: 100% 100%;
-        background-position: bottom center;
       }
       .text {
-        font-size: 46px;
+        font-size: 14px;
       }
     }
 
     .active {
-      width: 339px;
-      height: 78px;
-      background: url('@/assets/images/menu/menuActive.png') no-repeat;
+      background: url('@/assets/images/menu/menuActive.png') no-repeat bottom center;
       background-size: 100% 100%;
-      background-position: bottom center;
     }
   }
 
   .menu-content {
-    margin: 0 35px 0 28px;
-    height: 1540px;
+    margin: 0 0 0 -6px;
+    height: 488px;
     overflow-y: auto;
     overflow-x: hidden;
     .content-box {
       padding: 0 10px;
-      margin-top: 10px;
-      width: 779px;
+      width: 250px;
       background: url('@/assets/images/menu/menuContent.png') no-repeat;
       background-size: 100% 100%;
 
       .box-header {
-        height: 103px;
+        height: 36px;
         display: flex;
         align-items: center;
         justify-content: center;
         position: relative;
-        font-size: 40px;
+        font-size: 14px;
         font-weight: 500;
-        margin-bottom: 3px;
         position: relative;
         &::after {
           position: absolute;
@@ -323,29 +314,34 @@ defineExpose({ setMenuChange });
         }
         .icon1 {
           background-image: url('@/assets/images/menu/icon1.png');
+          background-size: 100% 100%;
         }
 
         .icon2 {
           background-image: url('@/assets/images/menu/icon2.png');
+          background-size: 100% 100%;
         }
         .icon3 {
           background-image: url('@/assets/images/menu/icon3.png');
+          background-size: 100% 100%;
         }
         .icon4 {
           background-image: url('@/assets/images/menu/icon4.png');
+          background-size: 100% 100%;
         }
         .icon5 {
           background-image: url('@/assets/images/menu/icon5.png');
+          background-size: 100% 100%;
         }
 
         .expand-icon {
           position: absolute;
           top: 50%;
-          right: 79px;
+          right: 30px;
           transform: translateY(-50%);
           cursor: pointer;
-          width: 33px;
-          height: 18px;
+          width: 11px;
+          height: 6px;
         }
 
         .down-icon {
@@ -363,18 +359,17 @@ defineExpose({ setMenuChange });
         display: flex;
         align-items: center;
         flex-wrap: wrap;
-        margin-top: 5px;
-        padding: 19px 15px;
+        padding: 5px 3px;
         overflow: hidden;
 
         .box-item-active {
-          text-shadow: 0px 0px 8px #0766d6;
+          text-shadow: 0px 0px 4px #0766d6;
         }
 
         .box-item {
-          padding: 20px 15px;
+          padding: 7px 5px;
           cursor: pointer;
-          font-size: 38px;
+          font-size: 14px;
           font-family: 'PingFang SC', sans-serif;
           display: flex;
           align-items: center;
@@ -384,11 +379,11 @@ defineExpose({ setMenuChange });
           }
 
           .checked-box {
-            width: 32px;
-            height: 32px;
+            width: 10px;
+            height: 10px;
             background: url('@/assets/images/menu/checked-box.png') no-repeat;
             background-size: 100% 100%;
-            margin-right: 12px;
+            margin-right: 4px;
           }
 
           .checked {

src/views/globalMap/index.vue

@@ -21,7 +21,7 @@
       <!--右侧菜单-->
       <RightMenu ref="rightMenuRef" :point-type="pointType" />
       <!--更换地图类型-->
-      <SwitchMapTool :active-map="activeMap" class="tool-box" @switch-map="switchMap" />
+<!--      <SwitchMapTool :active-map="activeMap" class="tool-box" @switch-map="switchMap" />-->
       <!--时间轴-->
       <TimeAxis />
       <DrawTools v-if="showDrawTools" @handle-analysis-data="handleAnalysisData" />

src/views/routineCommandMap/LeftSection/index.vue

@@ -19,7 +19,7 @@ import RealSituation from './RealSituation.vue';
   display: flex;
   flex-direction: column;
   font-size: 16px;
-  margin-right: 20px;
+  margin-right: 7px;
   :deep(.video-card) {
     animation-name: slideLeft;
     animation-duration: 1.5s;

src/views/routineCommandMap/MiddleSection.vue

@@ -3,7 +3,7 @@
     <GlobalMap />
     <div class="btn-box">
       <div class="btn-active">备战防御</div>
-      <div class="btn" style="margin-left: 40px" @click="handleQuery2">指挥调度</div>
+      <div class="btn" style="margin-left: 14px" @click="handleQuery2">指挥调度</div>
     </div>
     <PositionMap v-if="mapDialogVisible" v-model:visible="mapDialogVisible" />
     <slot />

src/views/routineCommandMap/RightSection/index.vue

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

src/views/routineCommandMap/index.vue

@@ -113,11 +113,4 @@ onUnmounted(() => {
   height: 57px;
   cursor: pointer;
 }
-::-webkit-scrollbar-thumb {
-  background-color: #227dfe !important;
-}
-
-::-webkit-scrollbar-track {
-  background-color: transparent !important;
-}
 </style>