lcw

src/views/home/layout/head.vue

@@ -5,11 +5,31 @@
       <div class="f18 pl104">{{ hour + ":" + minute + ":" + second }}</div>
     </div>
     <div class="title absolute" @click="goPath">{{ props.title }}</div>
-    <!-- <div class="wd absolute">
-      <el-icon size="25px" style="top: 6px" color="#86C8EB"><Sunny /></el-icon>
-      <span> 温度 1~7°C </span>
-    </div> -->
-    <div class="zbbb" v-if="query" @click="show = true">值班报备</div>
+    <div class="zbbb" v-if="query&&JczMsg.zqlx == '1'" @click="show = true">值班报备</div>
+    <div v-else>
+      <div class="tc">
+         <div><img src="@/assets/images/peo.png" /></div>
+        <div class="hd">
+          <div class="name">姓名：{{ username }}</div>
+          <div class="work">单位：{{ deptName }}</div>
+        </div>
+        <el-dropdown :hide-on-click="false">
+          <span class="el-dropdown-link">
+            <el-icon :size="20" color="#fff">
+              <CaretBottom />
+            </el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu class="loginOut"  @click="goPath">
+              <el-dropdown-item command="logout" >前往后台</el-dropdown-item>
+            </el-dropdown-menu>
+            <el-dropdown-menu class="loginOut" @click="goAot">
+              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+    </div>
   </div>
   <el-dialog v-model="show" width="800px" title="值班报备">
     <div style="height: 50vh; overflow: auto" v-if="show">
@@ -30,6 +50,7 @@
 import { useRouter } from "vue-router";
 import { getRecentDay, timeValidate } from "@/utils/tools.js";
 import emitter from "@/utils/eventBus.js";
+import { useStore } from "vuex";
 import {
   ref,
   onMounted,
@@ -38,7 +59,7 @@ import {
   getCurrentInstance
 } from "vue";
 import zbbb from "./zbbb.vue";
-
+const store =useStore()
 const { proxy } = getCurrentInstance();
 const {
   D_BZ_RYMFJLB,
@@ -65,6 +86,10 @@ const props = defineProps({
   query: {
     type: String,
     default: ""
+  },
+  JczMsg: {
+    type: Object,
+    default: () => ({})
   }
 });
 const show = ref(false);
@@ -77,10 +102,14 @@ const second = ref("00"); //秒
 const hour = ref("00"); //时
 const day = ref(0);
 const timersfm = ref(null);
-
+const deptName = ref('');
+const username = ref('');
 const router = useRouter();
 const row = ref();
 onMounted(() => {
+  //登陆用户信息
+  deptName.value = localStorage.getItem("deptId") ? JSON.parse(localStorage.getItem("deptId"))[0].deptName : ''
+  username.value = localStorage.getItem("USERNAME");
   emitter.on("chengZ", (res) => {
     row.value = res;
     console.log(res);
@@ -104,6 +133,9 @@ function CurrentTime() {
 function goPath() {
   router.push("/editPassword");
 }
+const goAot = () => {
+   store.dispatch("user/logout");
+}
 </script>
 
 <style lang="scss" scoped>
@@ -119,7 +151,7 @@ function goPath() {
   position: relative;
   width: 100%;
   height: 65px;
-  z-index: 2;
+  z-index: 1;
   background: #0e1b29;
 
   &::after {
@@ -177,5 +209,28 @@ function goPath() {
     color: #fff;
     cursor: pointer;
   }
+
+  .tc {
+    position: absolute;
+    right: 20px;
+    display: flex;
+    top: 14px;
+    // width: 162px;
+    height: 48px;
+    // line-height: 48px;
+    background-size: 100% 100%;
+    color: #fff;
+    // background: url("~@/assets/images/btnbb.png") no-repeat center center;
+    // background-color: #1a4e838c;
+    border-radius: 5px;
+    align-items: center;
+    padding: 0 10px;
+    cursor: pointer;
+
+    .hd {
+      text-align: left;
+    }
+  }
+
 }
 </style>