退出登录

src/assets/styles/element-ui.scss

@@ -527,7 +527,7 @@
   border-radius: 0 !important;
   .el-picker-panel {
     background: rgba(5, 18, 53, 0.85) !important;
-    box-shadow:inset  0 0 40px rgba(26, 144, 255, 0.5) !important;
+    //box-shadow:inset  0 0 40px rgba(26, 144, 255, 0.5) !important;
     color: #b1cae0;
   }
   .el-date-table {
@@ -536,13 +536,24 @@
   .el-date-picker {
     width: 934px;
   }
+  .el-popper__arrow:before {
+    border: 4px solid #2C81FF !important;
+    background-color: rgba(5, 18, 53, 1) !important;
+  }
   .el-date-picker .el-picker-panel__content {
     width: auto !important;
   }
   .el-date-picker__header {
-    margin: 0 12px !important;
+    margin: 12px 12px 0 !important;
     height: 75px;
     line-height: 75px;
+    .arrow-left, .arrow-right, .d-arrow-left, .d-arrow-right {
+      font-size: 38px;
+      color: #ffffff;
+      &:hover {
+        color: #7af0e9;
+      }
+    }
   }
   .el-date-picker__header-label {
     color: #b1cae0;

src/components/HeaderSection/index.vue

@@ -28,16 +28,26 @@
           <div class="text">{{ item.label }}</div>
         </div>
       </div>
-      <i class="userIcon" />
+      <div ref="userRef" class="userIcon" @click="handleShowBox">
+        <div v-show="showBox" class="log-out-box">
+          <div class="log-out" @click="handleShowTip">退出登录</div>
+        </div>
+      </div>
     </div>
+    <Dialog v-model="showTip" class="tip" type="xs" title="提示" @close="showTip = false" @confirm="logout">确定注销并退出系统吗？</Dialog>
   </div>
 </template>
 
 <script lang="ts" setup name="headerSection">
 import usePermissionStore from '@/store/modules/permission';
+import useUserStore from '@/store/modules/user';
+import { onClickOutside} from "@vueuse/core";
+import { onClickOutside} from "@vueuse/core";
 
 const router = useRouter();
+const userStore = useUserStore();
 const permissionStore = usePermissionStore();
+const userRef = ref();
 // type 1 系统内地址 2 外链
 const menuState = computed(() => {
   return permissionStore.menuState;
@@ -56,6 +66,22 @@ const clickMenu = (item) => {
     router.push({ path: item.path });
   }
 };
+let showBox = ref(false);
+let showTip = ref(false);
+onClickOutside(userRef, (event) => {
+  showBox.value = false;
+});
+const handleShowBox = () => {
+  showBox.value = true;
+};
+const handleShowTip = () => {
+  showBox.value = false;
+  showTip.value = true;
+};
+const logout = async () => {
+  await userStore.logout();
+  location.href = import.meta.env.VITE_APP_CONTEXT_PATH + '#/';
+};
 </script>
 
 <style lang="scss" scoped>
@@ -169,6 +195,29 @@ const clickMenu = (item) => {
       margin-top: 54px;
       margin-left: 57px;
       margin-right: 57px;
+      cursor: pointer;
+      position: relative;
+      .log-out-box {
+        position: absolute;
+        bottom: -100px;
+        left: -30px;
+        border: 1px solid #2db3e9;
+        .log-out {
+          width: 200px;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          padding: 20px 0;
+          color: #ffffff;
+          font-size: 38px;
+          background: #0d2c70;
+          cursor: pointer;
+          &:hover {
+            background: #1b4ea5;
+          }
+        }
+      }
     }
   }
 }

src/views/emergencyCommandMap/LeftSection/VideoMonitor.vue

@@ -257,7 +257,7 @@ initData();
         position: absolute;
         bottom: 17px;
         right: 20px;
-
+        z-index: 99;
         display: flex;
         .label {
           width: 411px;
@@ -325,7 +325,7 @@ initData();
       position: absolute;
       bottom: 17px;
       right: 20px;
-
+      z-index: 99;
       display: flex;
       .label {
         width: 411px;

src/views/globalMap/RightMenu/index.vue

@@ -143,6 +143,14 @@ const clickBtn = (direction: string) => {
     scrollListRef.value.scrollTop += 168;
   }
 };
+const showIndexMenu = (name) => {
+  let index = menuState.menuData.findIndex((item) => {
+    return item.name === name;
+  });
+  if (index > -1) {
+    clickMenu(index);
+  }
+};
 // 点击菜单
 const clickMenu = (index) => {
   menuState.showMenu = true;
@@ -190,7 +198,7 @@ const updateMenu = (type, menu) => {
 const getMenuState = () => {
   return menuState;
 };
-defineExpose({ handleMenu, clickContractMenu, updateMenu, getMenuState });
+defineExpose({ handleMenu, showIndexMenu, clickContractMenu, updateMenu, getMenuState });
 </script>
 
 <style lang="scss" scoped>

src/views/globalMap/index.vue

@@ -134,16 +134,18 @@ const clickMenu = (item, dataList) => {
     rightMenuRef.value.updateMenu(item.checked ? '1' : '2', item);
   } else if (item.path === '2') {
     let checked = item.checked ? '1' : '2';
-    let index = findChecked(dataList, item.name);
     // 打点信息
     addMarkers(item);
-    if (item.checked || (!item.checked && index === 0)) {
-      rightMenuRef.value.updateMenu(
-        checked,
-        ['易涝隐患点', '无人机', '铁塔运行监测', '物资与装备', '通讯保障'].includes(item.name)
-          ? item
-          : { name: '图层分析', meta: { icon: 'icon1' } }
-      );
+    if (['易涝隐患点', '无人机', '铁塔运行监测', '物资与装备', '通讯保障'].includes(item.name)) {
+      rightMenuRef.value.updateMenu(checked, item);
+    } else {
+      let index = findChecked(dataList, item.name);
+      if (item.checked && index > 0) {
+        // 已有图层分析直接切换到该index
+        rightMenuRef.value.showIndexMenu('图层分析');
+      } else if (item.checked || (!item.checked && index === 0)) {
+        rightMenuRef.value.updateMenu(checked, { name: '图层分析', meta: { icon: 'icon1' } });
+      }
     }
   } else if (item.path === '3') {
     // 通讯保障