引入海康威视插件

web/src/views/MainView.vue

@@ -1,6 +1,18 @@
 <template>
   <div class="main">
-    <div class="header"></div>
+    <div class="header">
+      <span class="time">
+        <span class="text" style="margin-right: 15px"> {{ dateVal }} </span>
+        <span class="text" style="width: 80px;">{{ currentTime  }}</span>
+        <span class="text">{{ weekVal }}</span>
+      </span>
+
+      <span class="title text"> 能源站监控与运行管理系统 </span>
+      <span class="user">
+        <span style="margin-right: 15px"> {{ user }}</span>
+        <span class="iconfont icon-tuichu" @click="logout"></span>
+      </span>
+    </div>
 
     <div class="page">
       <div class="subMenu" v-if="subMenu.length > 0">
@@ -35,7 +47,9 @@
 
 <script>
 // @ is an alias to /src
-
+import moment from 'moment'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
 export default {
   name: 'MainView',
   components: {},
@@ -104,14 +118,19 @@ export default {
           ]
         }
       ],
-      subMenu: []
+      subMenu: [],
+      currentTime: '',
+      timer: null,
+      dateVal: moment().locale('zh-cn').format('ll') + ' ',
+      weekVal: moment().locale('zh-cn').format('dddd'),
+      user:localStorage.getItem('account').replace(/^"|"$/g, '')
     }
   },
   watch: {
     $route: {
       handler(n) {
-        console.log(n,"nnnnnnnnnnnnnn")
-        this.subMenu =n.matched[1].children || []
+        console.log(n, 'nnnnnnnnnnnnnn')
+        this.subMenu = n.matched[1].children || []
       },
       immediate: true
     }
@@ -119,8 +138,35 @@ export default {
 
   mounted() {
     this.initRoute()
+    this.getDateTime()
+    this.timer = setInterval(() => {
+      this.getDateTime()
+    }, 1000)
+  },
+  unmounted() {
+    clearInterval(this.timer)
   },
   methods: {
+    logout(){
+      const that=this
+      this.$Modal.confirm({
+        title: '你确认退出系统吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          localStorage.clear()
+          that.$router.push('/login')
+        },
+        onCancel() {
+        },
+        class: 'test'
+      })
+      
+    },
+    //getDateTime
+    getDateTime() {
+      this.currentTime = moment().locale('zh-cn').format('LTS')
+    },
     // 过滤函数：根据权限数据过滤路由并附加权限信息
     filterRoutes(routes, permissions) {
       return routes.filter((route) => {
@@ -130,7 +176,7 @@ export default {
 
         // 如果有权限项，附加到路由对象
         if (routePermissions.length > 0) {
-          route.permissions = routePermissions;
+          route.permissions = routePermissions
           hasViewPermission = true
         }
 
@@ -155,7 +201,7 @@ export default {
       //   this.menuList,
       //   JSON.parse(localStorage.getItem('permission'))
       // )
-      console.log( this.$route.matched, 'filteredRoutes')
+      console.log(this.$route.matched, 'filteredRoutes')
       this.subMenu = this.$route.matched[1].children || []
       // this.menuList= JSON.parse(localStorage.getItem('permission'))
       // this.subMenu =filteredRoutes[0].children||[]
@@ -172,7 +218,7 @@ export default {
     subMenuClick(subMenu) {
       console.log(subMenu, subMenu.path)
       this.subCurrentKey = subMenu.path
-      this.$router.push('/system'+subMenu.path)
+      this.$router.push('/system' + subMenu.path)
     }
   }
 }
@@ -188,6 +234,44 @@ export default {
 .header {
   width: 100%;
   height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  .text {
+    background: linear-gradient(
+      180deg,
+      rgb(255, 255, 255) 0%,
+      rgb(227, 254, 255) 33.17%,
+      rgb(35 190 195) 100%
+    );
+    
+    -webkit-background-clip: text; /* 兼容 WebKit 浏览器 */
+    background-clip: text;
+    color: transparent; /* 必须设置为透明 */
+    display: inline-block; /* 确保背景裁剪生效 */
+    line-height: 80px;
+    font-size: 18px;
+  }
+  .title{
+    font-size: 40px;
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 10px;
+
+  }
+  .user{
+    font-weight: 700;
+    font-size: 18px;
+    .icon-tuichu{
+      cursor: pointer;
+    }
+
+  }
+  .time{
+    font-weight: 700;
+  }
 }
 .subMenu {
   display: flex;
@@ -222,7 +306,7 @@ export default {
   height: 100%;
 }
 .subcontent {
-  height: calc(100% - 46px);
+  height: calc(100% - 56px);
 }
 .menu {
   position: absolute;
@@ -242,6 +326,7 @@ export default {
     color: #fff;
     font-size: 20px;
     font-weight: 700;
+    border: 1px solid #ffffff00;
     cursor: pointer;
     margin: 0 35px;
   }