124

src/views/home/layout/head.vue

@@ -0,0 +1,178 @@
+<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" title="Shipping address">
+    <div style="height: 50vh; overflow: auto">
+      <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";
+
+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"
+);
+import zbbb from "./zbbb.vue";
+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%;
+    cursor: pointer;
+  }
+}
+</style>