顶部栏样式

.env.development

@@ -10,7 +10,7 @@ VITE_APP_BASE_DOWNLOAD_API = '/api/file/download/'
 # VITE_APP_BASE_API = 'http://127.0.0.1:9988'
 
 # 应用访问路径 例如使用前缀 /admin/
-VITE_APP_CONTEXT_PATH = '/'
+VITE_APP_CONTEXT_PATH = '/yjzp/'
 
 # 监控地址
 VITE_APP_MONITOR_ADMIN = 'http://localhost:9090/admin/applications'

.env.production

@@ -5,7 +5,7 @@ VITE_APP_TITLE = 智慧应急工作台
 VITE_APP_ENV = 'production'
 
 # 应用访问路径 例如使用前缀 /admin/
-VITE_APP_CONTEXT_PATH = '/'
+VITE_APP_CONTEXT_PATH = '/yjzp/'
 
 # 监控地址
 VITE_APP_MONITOR_ADMIN = '/admin/applications'

src/assets/styles/sidebar.scss

@@ -16,7 +16,7 @@
     width: $base-sidebar-width !important;
     background-color: $base-menu-background;
     height: 100%;
-    position: fixed;
+    position: absolute;
     font-size: 0;
     top: 0;
     bottom: 0;

src/assets/styles/variables.module.scss

@@ -82,7 +82,7 @@ $base-logo-title-color: #ffffff;
 
 $base-menu-light-color: rgba(0, 0, 0, 0.7);
 $base-menu-light-background: #ffffff;
-$base-logo-light-title-color: #001529;
+$base-logo-light-title-color: #2c81ff;;
 
 $base-sub-menu-background: var(--subMenuBg);
 $base-sub-menu-hover: var(--subMenuHover);

src/components/Hamburger/index.vue

@@ -1,10 +1,11 @@
 <template>
   <div style="padding: 0 15px" @click="toggleClick">
-    <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64">
-      <path
-        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
-      />
-    </svg>
+    <div class="hamburger" />
+<!--    <svg :class="{ 'is-active': isActive }" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64">-->
+<!--      <path-->
+<!--        d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"-->
+<!--      />-->
+<!--    </svg>-->
   </div>
 </template>
 
@@ -25,8 +26,10 @@ const toggleClick = () => {
 .hamburger {
   display: inline-block;
   vertical-align: middle;
-  width: 20px;
-  height: 20px;
+  width: 21px;
+  height: 14px;
+  background: url('@/assets/images/hamburger.png') no-repeat;
+  background-size: 100% 100%;
 }
 
 .hamburger.is-active {

src/layout/components/Navbar.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="navbar">
+    <logo v-if="showLogo" :collapse="isCollapse" />
     <hamburger id="hamburger-container" :is-active="appStore.sidebar.opened" class="hamburger-container" @toggle-click="toggleSideBar" />
-    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />
+<!--    <breadcrumb v-if="!settingsStore.topNav" id="breadcrumb-container" class="breadcrumb-container" />-->
     <top-nav v-if="settingsStore.topNav" id="topmenu-container" class="topmenu-container" />
 
     <div class="right-menu flex align-center">
@@ -25,16 +26,16 @@
         <search-menu ref="searchMenuRef" />
         <el-tooltip content="搜索" effect="dark" placement="bottom">
           <div class="right-menu-item hover-effect" @click="openSearchMenu">
-            <svg-icon class-name="search-icon" icon-class="search" />
+            <div class="search-icon" />
           </div>
         </el-tooltip>
         <!-- 消息 -->
         <el-tooltip :content="$t('navbar.message')" effect="dark" placement="bottom">
-          <div>
+          <div style="margin: 12px">
             <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
               <template #reference>
                 <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">
-                  <svg-icon icon-class="message" />
+                  <div class="message" />
                 </el-badge>
               </template>
               <template #default>
@@ -44,9 +45,9 @@
           </div>
         </el-tooltip>
 
-        <el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom">
-          <screenfull id="screenfull" class="right-menu-item hover-effect" />
-        </el-tooltip>
+<!--        <el-tooltip :content="$t('navbar.full')" effect="dark" placement="bottom">-->
+<!--          <screenfull id="screenfull" class="right-menu-item hover-effect" />-->
+<!--        </el-tooltip>-->
 
 <!--        <el-tooltip :content="$t('navbar.language')" effect="dark" placement="bottom">-->
 <!--          <lang-select id="lang-select" class="right-menu-item hover-effect" />-->
@@ -60,6 +61,7 @@
         <el-dropdown class="right-menu-item hover-effect" trigger="click" @command="handleCommand">
           <div class="avatar-wrapper">
             <img :src="userStore.avatar" class="user-avatar" />
+            <span>{{ nickName }}</span>
             <el-icon><caret-bottom /></el-icon>
           </div>
           <template #dropdown>
@@ -67,9 +69,9 @@
               <router-link v-if="!dynamic" to="/user/profile">
                 <el-dropdown-item>{{ $t('navbar.personalCenter') }}</el-dropdown-item>
               </router-link>
-              <el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">
-                <span>{{ $t('navbar.layoutSetting') }}</span>
-              </el-dropdown-item>
+<!--              <el-dropdown-item v-if="settingsStore.showSettings" command="setLayout">-->
+<!--                <span>{{ $t('navbar.layoutSetting') }}</span>-->
+<!--              </el-dropdown-item>-->
               <el-dropdown-item divided command="logout">
                 <span>{{ $t('navbar.logout') }}</span>
               </el-dropdown-item>
@@ -82,6 +84,7 @@
 </template>
 
 <script setup lang="ts">
+import Logo from './Sidebar/Logo.vue';
 import SearchMenu from './TopBar/search.vue';
 import useAppStore from '@/store/modules/app';
 import useUserStore from '@/store/modules/user';
@@ -97,6 +100,9 @@ const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 const noticeStore = storeToRefs(useNoticeStore());
 const newNotice = ref(<number>0);
+const showLogo = computed(() => settingsStore.sidebarLogo);
+const isCollapse = computed(() => !appStore.sidebar.opened);
+const nickName = computed(() => userStore.nickname);
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -201,14 +207,14 @@ watch(
 }
 
 .navbar {
-  height: 50px;
+  height: 58px;
   overflow: hidden;
   position: relative;
-  //background: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-
+  background: url('@/assets/images/header.png') no-repeat;
+  background-size: 100% 100%;
+  box-shadow: 0 1px 6px rgba(0, 21, 41, 0.12);
   .hamburger-container {
-    line-height: 46px;
+    line-height: 58px;
     height: 100%;
     float: left;
     cursor: pointer;
@@ -237,7 +243,6 @@ watch(
   .right-menu {
     float: right;
     height: 100%;
-    line-height: 50px;
     display: flex;
 
     &:focus {
@@ -246,8 +251,8 @@ watch(
 
     .right-menu-item {
       display: inline-block;
-      padding: 0 8px;
-      height: 100%;
+      padding: 0 12px;
+      //height: 100%;
       font-size: 18px;
       color: #5a5e66;
       vertical-align: text-bottom;
@@ -263,29 +268,44 @@ watch(
     }
 
     .avatar-container {
-      margin-right: 40px;
+      margin-right: 30px;
 
       .avatar-wrapper {
         margin-top: 5px;
         position: relative;
-
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        height: 100%;
         .user-avatar {
           cursor: pointer;
-          width: 40px;
-          height: 40px;
-          border-radius: 10px;
-          margin-top: 10px;
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          margin: 12px;
         }
 
         i {
           cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 25px;
+          //position: absolute;
+          //right: -20px;
+          //top: 25px;
           font-size: 12px;
         }
       }
     }
   }
 }
+.search-icon {
+  width: 17px;
+  height: 16px;
+  background: url('@/assets/images/search.png') no-repeat;
+  background-size: 100% 100%;
+}
+.message {
+  width: 17px;
+  height: 16px;
+  background: url('@/assets/images/message.png') no-repeat;
+  background-size: 100% 100%;
+}
 </style>

src/layout/components/Sidebar/Logo.vue

@@ -2,17 +2,16 @@
   <div
     class="sidebar-logo-container"
     :class="{ collapse: collapse }"
-    :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"
   >
     <transition :enter-active-class="proxy?.animate.logoAnimate.enter" mode="out-in">
       <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
-        <!--        <img v-if="logo" :src="logo" class="sidebar-logo" />-->
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
         <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
           {{ title }}
         </h1>
       </router-link>
       <router-link v-else key="expand" class="sidebar-logo-link" to="/">
-        <!--        <img v-if="logo" :src="logo" class="sidebar-logo" />-->
+        <img v-if="logo" :src="logo" class="sidebar-logo" />
         <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">
           {{ title }}
         </h1>
@@ -51,22 +50,22 @@ const sideTheme = computed(() => settingsStore.sideTheme);
 
 .sidebar-logo-container {
   position: relative;
-  width: 100%;
-  height: 50px;
-  line-height: 50px;
-  background: #2b2f3a;
+  width: 200px;
+  height: 58px;
+  line-height: 58px;
   text-align: center;
   overflow: hidden;
+  float: left;
 
   & .sidebar-logo-link {
     height: 100%;
     width: 100%;
 
     & .sidebar-logo {
-      width: 32px;
-      height: 32px;
+      width: 25px;
+      height: 27px;
       vertical-align: middle;
-      margin-right: 12px;
+      margin-right: 10px;
     }
 
     & .sidebar-title {
@@ -74,7 +73,7 @@ const sideTheme = computed(() => settingsStore.sideTheme);
       margin: 0;
       color: #fff;
       font-weight: 600;
-      line-height: 50px;
+      line-height: 58px;
       font-size: 18px;
       font-family:
         Avenir,

src/layout/components/Sidebar/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div :class="{ 'has-logo': showLogo }" :style="{ backgroundColor: bgColor }">
-    <logo v-if="showLogo" :collapse="isCollapse" />
     <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
       <transition :enter-active-class="proxy?.animate.menuSearchAnimate.enter" mode="out-in">
         <el-menu
@@ -21,7 +20,6 @@
 </template>
 
 <script setup lang="ts">
-import Logo from './Logo.vue';
 import SidebarItem from './SidebarItem.vue';
 import variables from '@/assets/styles/variables.module.scss';
 import useAppStore from '@/store/modules/app';

src/layout/components/TagsView/index.vue

@@ -8,7 +8,6 @@
         :class="isActive(tag) ? 'active' : ''"
         :to="{ path: tag.path ? tag.path : '', query: tag.query, fullPath: tag.fullPath ? tag.fullPath : '' }"
         class="tags-view-item"
-        :style="activeStyle(tag)"
         @click.middle="!isAffix(tag) ? closeSelectedTag(tag) : ''"
         @contextmenu.prevent="openMenu(tag, $event)"
       >
@@ -67,13 +66,6 @@ watch(visible, (value) => {
 const isActive = (r: RouteLocationNormalized): boolean => {
   return r.path === route.path;
 };
-const activeStyle = (tag: RouteLocationNormalized) => {
-  if (!isActive(tag)) return {};
-  return {
-    'background-color': theme.value,
-    'border-color': theme.value
-  };
-};
 const isAffix = (tag: RouteLocationNormalized) => {
   return tag?.meta && tag?.meta?.affix;
 };
@@ -255,16 +247,14 @@ onMounted(() => {
       position: relative;
       cursor: pointer;
       height: 26px;
-      line-height: 23px;
+      line-height: 26px;
       background-color: var(--el-bg-color);
-      border: 1px solid var(--el-border-color-light);
       color: #495060;
-      padding: 0 8px;
       font-size: 12px;
-      margin-left: 5px;
+      margin-left: 15px;
       margin-top: 4px;
       &:hover {
-        color: var(--el-color-primary);
+        color: #2c81ff;
       }
       &:first-of-type {
         margin-left: 15px;
@@ -273,19 +263,7 @@ onMounted(() => {
         margin-right: 15px;
       }
       &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
-        &::before {
-          content: '';
-          background: #fff;
-          display: inline-block;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          position: relative;
-          margin-right: 5px;
-        }
+        color: #2c81ff;
       }
     }
   }

src/layout/index.vue

@@ -1,22 +1,24 @@
 <template>
   <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <side-bar v-if="!sidebar.hide" class="sidebar-container" />
-    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
-      <!-- <el-scrollbar>
+<!--    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />-->
+    <navbar ref="navbarRef" @set-layout="setLayout" />
+    <div style="position: relative">
+      <side-bar v-if="!sidebar.hide" class="sidebar-container" />
+      <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
+        <!-- <el-scrollbar>
+          <div :class="{ 'fixed-header': fixedHeader }">
+            <navbar ref="navbarRef" @setLayout="setLayout" />
+            <tags-view v-if="needTagsView" />
+          </div>
+          <app-main />
+          <settings ref="settingRef" />
+        </el-scrollbar> -->
         <div :class="{ 'fixed-header': fixedHeader }">
-          <navbar ref="navbarRef" @setLayout="setLayout" />
           <tags-view v-if="needTagsView" />
         </div>
         <app-main />
         <settings ref="settingRef" />
-      </el-scrollbar> -->
-      <div :class="{ 'fixed-header': fixedHeader }">
-        <navbar ref="navbarRef" @set-layout="setLayout" />
-        <tags-view v-if="needTagsView" />
       </div>
-      <app-main />
-      <settings ref="settingRef" />
     </div>
   </div>
 </template>

src/settings.ts

@@ -11,7 +11,7 @@ const setting: DefaultSettings = {
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',
   /**
    * 是否系统布局配置
    */

src/types/components.d.ts

@@ -16,16 +16,25 @@ declare module 'vue' {
     CompanyMap: typeof import('./../components/Map/company-map.vue')['default']
     DictTag: typeof import('./../components/DictTag/index.vue')['default']
     Editor: typeof import('./../components/Editor/index.vue')['default']
+    ElAnchor: typeof import('element-plus/es')['ElAnchor']
+    ElAnchorLink: typeof import('element-plus/es')['ElAnchorLink']
     ElAutocomplete: typeof import('element-plus/es')['ElAutocomplete']
     ElBadge: typeof import('element-plus/es')['ElBadge']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
+    ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -35,27 +44,31 @@ declare module 'vue' {
     ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElLink: typeof import('element-plus/es')['ElLink']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']

src/views/duty/eventing/eventDetails.vue

@@ -173,28 +173,7 @@ const { mm_event_type, mm_event_level, mm_event_state, region } = toRefs<any>(
 // 事件等级数据
 let eventLevelState = reactive({
   show: false,
-  data: [
-    {
-      timestamp: '2024/7/1 09:00:09',
-      name: '张佳佳',
-      level: '4'
-    },
-    {
-      timestamp: '2024/7/1 09:00:09',
-      name: '张佳佳',
-      level: '3'
-    },
-    {
-      timestamp: '2024/7/1 09:00:09',
-      name: '张佳佳',
-      level: '2'
-    },
-    {
-      timestamp: '2024/7/1 09:00:09',
-      name: '张佳佳',
-      level: '1'
-    }
-  ]
+  data: []
 });
 
 const handleEventLevelOpen = () => {