xzlz_JczWeb/src/views/home/layout/head.vue

<template>
  <div class="home-head-box relative">
    <div class="time absolute">
      <div class="f20">{{ datatime }}</div>
      <div class="f18 pl104">{{ hour + ":" + minute + ":" + second }}</div>
    </div>
    <div class="title absolute" @click="goPath">{{ props.title }}</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">
      <zbbb :row="row" @close="close" :dic="{
        D_BZ_RYMFJLB,
        D_BZ_JYQXFL,
        D_BZ_XFQDJ,
        D_BZ_SF,
        D_BZ_JLLX,
        D_QW_BBZT,
        D_QW_BC_KTS
      }" />
    </div>
  </el-dialog>
</template>

<script setup>
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,
  defineProps,
  onUnmounted,
  getCurrentInstance
} from "vue";
import zbbb from "./zbbb.vue";
const store =useStore()
const { proxy } = getCurrentInstance();
const {
  D_BZ_RYMFJLB,
  D_BZ_JYQXFL,
  D_BZ_XFQDJ,
  D_BZ_SF,
  D_BZ_JLLX,
  D_QW_BBZT,
  D_QW_BC_KTS
} = proxy.$dict(
  "D_BZ_RYMFJLB",
  "D_BZ_JYQXFL",
  "D_BZ_XFQDJ",
  "D_BZ_SF",
  "D_BZ_JLLX",
  "D_QW_BBZT",
  "D_QW_BC_KTS"
);
const props = defineProps({
  title: {
    type: String,
    default: "林芝市智慧公安检查"
  },
  query: {
    type: String,
    default: ""
  },
  JczMsg: {
    type: Object,
    default: () => ({})
  }
});
const show = ref(false);
const close = () => {
  show.value = false;
};
const datatime = ref(getRecentDay(0));
const minute = ref("00"); //分
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;
  });
  timersfm.value = setInterval(() => {
    CurrentTime();
  }, 1000);
});
// 获取时分秒
function CurrentTime() {
  const date = new Date();
  hour.value = date.getHours();
  minute.value = date.getMinutes();
  second.value = date.getSeconds();
  day.value = day.value < 10 ? "0" + day.value : day.value;
  hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
  minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
  second.value = second.value < 10 ? "0" + second.value : second.value;
}

function goPath() {
  router.push("/editPassword");
}
const goAot = () => {
   store.dispatch("user/logout");
}
</script>

<style lang="scss" scoped>
.zdybg {
  width: 100%;
  height: 65px;
  position: relative;
  background: rgba(0, 0, 0, 0.8);
  z-index: 2;
}

.home-head-box {
  position: relative;
  width: 100%;
  height: 65px;
  z-index: 1;
  background: #0e1b29;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    width: 100%;
    height: 138px;
    z-index: -1;
    background: url("~@/assets/images/home_head.png") no-repeat center center;
    background-size: 100% 100%;
  }

  .title {
    font-size: 36px;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    font-family: "YSBTH";
    background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
  }

  .time {
    font-family: "DigifaceWide";
    color: #fff;
    left: 25%;
    top: 10px;
  }

  .wd {
    right: 25%;
    top: 12px;
    font-size: 16px;
    font-family: "DigifaceWide";
    color: #fff;
  }

  .zbbb {
    position: absolute;
    right: 20px;
    top: 14px;
    font-size: 16px;
    width: 162px;
    height: 48px;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    background: url("~@/assets/images/btnbb.png") no-repeat center center;
    background-size: 100% 100%;
    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>