Merge branch 'master' of http://94.191.59.107:3000/liuqiang/scd_project

src/assets/font/font.css

@@ -1,9 +1,3 @@
-@font-face {
-    font-family: "clockFont";
-    src: url('alarm clock.ttf');
-    font-weight: normal;
-    font-style: normal;
-  }
   @font-face {
     font-family: "DS1Font";
     src: url('DS-DIGI-1.ttf');

src/components/substationList/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        
+    </div>
+</template>
+
+<script>
+export default {
+
+    data() {
+        return {
+            
+        };
+    },
+
+    mounted() {
+        
+    },
+
+    methods: {
+        
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/layout/components/SideBar/UserIcon.vue

@@ -9,7 +9,7 @@
       mode="horizontal"
       class="header_menu"
     >
-    <!-- #TODO 目前写死 后面再改 -->
+      <!-- #TODO 目前写死 后面再改 -->
       <!-- 根据 sidebarRouters 路由，生成菜单 -->
       <!-- <sidebar-item
             v-for="(route, index) in sidebarRouters"
@@ -41,33 +41,63 @@
     <div class="header_user_line">|</div>
     <!-- 时间 -->
     <div class="time_box">
-        <!-- #TODO 动态获取实时变化 -->
-      <span class="time_day">2023-08-09</span>
-      <span class="time_weekday">星期三</span>
-      <span class="time_date">14:20:22</span>
+      <!-- #TODO 动态获取实时变化 -->
+      <span class="time_day">{{fmtTime?fmtTime[0]:null}}</span>
+      <span class="time_weekday">星期{{weekday}}</span>
+      <span class="time_date">{{fmtTime?fmtTime[1]:null}}</span>
     </div>
     <div class="header_user_line">|</div>
     <!-- 图标 -->
     <div class="icon_box">
-      <i class="el-icon-message-solid"></i>
+      <el-badge :value="9" class="item">
+        <i class="el-icon-message-solid"></i>
+      </el-badge>
+
       <div class="header_user_line">/</div>
       <i class="el-icon-user-solid"></i>
       <span>username</span>
       <div class="header_user_line">/</div>
-      <i class="el-icon-switch-button" style="margin-right:2rem"></i>
+      <i class="el-icon-switch-button" style="margin-right: 2rem"></i>
     </div>
   </div>
 </template>
 
 <script>
+import { formatDate } from "@/utils/common";
 export default {
   data() {
-    return {};
+    return {
+      // 当前时间
+      fmtTime :[],
+      // 星期数
+      weekday:'',
+      // 定时器
+      timer:''
+    };
   },
 
-  mounted() {},
+  mounted() {
+    // 创建定时器获取时间
+    setTimeout(() => {
+      this.getTime();
+    }, 1);
+    this.timer = setInterval(()=>{
+      this.getTime();
+    },1000)
+  },
+  beforeDestroy(){
+    clearInterval(timer)
+  },
 
-  methods: {},
+  methods: {
+    // 获取并格式化当前时间
+    getTime() {
+      const time = new Date().getTime();
+      const thisDay = new Date().getDay()
+      this.weekday = ["日", "一", "二", "三", "四", "五", "六"][thisDay]
+      this.fmtTime = formatDate(time).split(' ')
+    },
+  },
 };
 </script>
 
@@ -91,23 +121,25 @@ export default {
     .time_date {
       font-family: DS4Font;
       margin-right: 2rem;
+      width: 3.5rem;
     }
   }
   .icon_box {
     display: flex;
     align-items: center;
+    cursor: pointer;
     i {
       font-size: 1.8rem;
       color: #00cefb;
     }
-    span{
-        font-size: 1.4rem;
-        color: #516380;
+    span {
+      font-size: 1.4rem;
+      color: #516380;
     }
     .header_user_line {
       font-size: 1.33rem;
       margin: 0 2rem;
-      color: #7A13E1;
+      color: #7a13e1;
       cursor: pointer;
     }
   }
@@ -118,13 +150,16 @@ export default {
 .header_user_line {
   font-size: 1.33rem;
   margin-right: 2rem;
-  color: #7A13E1;
+  color: #7a13e1;
   cursor: pointer;
 }
 ::v-deep .el-menu-item {
   height: 48px !important;
-  font-size: 1.33rem;
+  font-size: 1.33rem !important;
   line-height: 48px !important;
+  color: #516380 !important;
+  padding: 0 !important;
+  margin-right: 2rem !important;
 }
 ::v-deep .is-active {
   border-bottom: 4px solid #134bea !important;

src/layout/components/SideBar/index.vue

@@ -34,6 +34,7 @@ export default {
   height: 48px;
   background-color: #fff;
   display: flex;
+  margin-bottom: 2rem;
   justify-content: space-between;
   .left_box {
     display: flex;

src/utils/common.js

@@ -0,0 +1,29 @@
+/**
+ * 时间格式化
+ */
+export function formatDate(cellValue) {
+   if (cellValue == null || cellValue === "") return "";
+   const date = new Date(cellValue)
+   const year = date.getFullYear()
+   const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+   const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+   const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+   const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+   const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+   return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+ }
+ Date.prototype.Format = function(fmt) {
+   var o = {
+       "M+": this.getMonth() + 1, //月份
+       "d+": this.getDate(), //日
+       "h+": this.getHours(), //小时
+       "m+": this.getMinutes(), //分
+       "s+": this.getSeconds(), //秒
+       "q+": Math.floor((this.getMonth() + 3) / 3), //季度
+       "S": this.getMilliseconds() //毫秒
+   };
+   if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+   for (var k in o)
+       if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+   return fmt;
+}