123

package.json

@@ -29,7 +29,8 @@
     "pinia": "2.0.22",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
-    "vue-router": "4.1.4"
+    "vue-router": "4.1.4",
+    "dayjs": "^1.11.10"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "3.1.0",

src/layoutMain/components/Navbar.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="navbar">
     <!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="settingsStore.topNav" /> -->
-    <div class="flex">
+    <div class="left">
       <img src="@/assets/logo/logo.png" alt="dark" />
       <span>
         若依管理系统
       </span>
     </div>
+    <div class="middle">
+        BIM运维管理系统
+    </div>
     <div class="right-menu">
       <template v-if="appStore.device !== 'mobile'">
+        <p class="mr10">
+          {{ currentTime }}
+        </p>
         <header-search id="header-search" class="right-menu-item" />
 
         <el-tooltip content="源码地址" effect="dark" placement="bottom">
@@ -63,11 +69,18 @@ import RuoYiDoc from '@/components/RuoYi/Doc'
 import useAppStore from '@/store/modules/app'
 import useUserStore from '@/store/modules/user'
 import useSettingsStore from '@/store/modules/settings'
+import dayjs from "dayjs";
 
 const appStore = useAppStore()
 const userStore = useUserStore()
 const settingsStore = useSettingsStore()
 
+const currentTime = ref("");
+const interval = ref("");
+
+onMounted(() => {
+  interval = setInterval(updateTime, 1000);
+});
 function toggleSideBar() {
   appStore.toggleSideBar()
 }
@@ -96,7 +109,9 @@ function logout() {
     })
   }).catch(() => { });
 }
-
+const updateTime = () => {
+  currentTime = dayjs().format("YYYY年 MM月 DD日");
+};
 const emits = defineEmits(['setLayout'])
 function setLayout() {
   emits('setLayout');
@@ -110,10 +125,28 @@ function setLayout() {
   position: relative;
   background: #fff;
   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  .flex {
+  display: flex;
+  justify-content: space-between;
+  .left {
+    width: 33%;
     display: flex;
     align-items: center;
     height: 100%;
+    border: 1px solid red;
+  }
+  .middle {
+    width: 33%;
+    border: 1px solid red;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .right-menu {
+    width: 33%;
+    border: 1px solid red;
+    display: flex;
+    align-items: center;
+    justify-content: end;
   }
   .hamburger-container {
     line-height: 46px;

src/utils/dayjs.js

@@ -0,0 +1,8 @@
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'  // 导入中文语言包
+import weekOfYear from 'dayjs/plugin/weekOfYear'
+import weekday from 'dayjs/plugin/weekday'
+
+dayjs.extend(weekOfYear)
+dayjs.extend(weekday)
+dayjs.locale('zh-cn')  // 设置语言为中文