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="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>
  <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 {
  ref,
  onMounted,
  defineProps,
  onUnmounted,
  getCurrentInstance
} from "vue";
import zbbb from "./zbbb.vue";

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: ""
  }
});
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 router = useRouter();
const row = ref();
onMounted(() => {
  emitter.on("chengZ", (res) => {
    row.value = res;
    console.log(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");
}
</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: 2;
  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;
  }
}
</style>