yudao-dev/src/views/productionVisualization/equipmentBoard/components/Header.vue

<template>
  <header class="report-header">
    <!-- logo 放在最左侧 -->
    <!-- <img style="width: 221px;height: 31px;" src="" alt="benmaLogo" class="logo"> -->
    <!-- 标题居中显示 -->
    <!-- <h1>{{ topTitle }}</h1> -->
    <!-- 实时时间显示 -->
    <div class="header-right">
      <img style="width: 426px;height: 44px;" src="../../../../assets/img/ssdlLeftTitle.png" alt="">
      <!-- <div class="current-time">
        <div class="YMD">{{ YMD }}</div>
        <div class="time">{{ time }}</div>
      </div> -->
    </div>
    <div class="header-right">
      <img style="width: 426px;height: 44px;" src="../../../../assets/img/ssdlTitle.png" alt="">
      <div class="current-time">
        <div class="YMD">{{ YMD }}</div>
        <div class="time">{{ time }}</div>
      </div>
    </div>
    <!-- 全屏按钮保持在右侧 -->
    <el-button type="text" class="screen-btn" :title="isFullScreen ? '退出全屏' : '全屏'" @click="changeFullScreen">
      <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
      <svg-icon v-else icon-class="fullScreenView" />
    </el-button>
  </header>
</template>

<script>
export default {
  name: 'Header',
  props: {
    isFullScreen: {
      type: Boolean,
      default: false
    },
    topTitle: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      time: '',
      YMD:'',
      timeTimer: null // 用于存储定时器
    }
  },
  methods: {
    changeFullScreen() {
      this.$emit('screenfullChange')
    },
    exportPDF() {
      this.$emit('exportPDF')
    },
    // 更新当前时间
    updateTime() {
      const now = new Date()
      const hours = this.padZero(now.getHours())
      const minutes = this.padZero(now.getMinutes())
      // 新增：获取并格式化秒数
      const seconds = this.padZero(now.getSeconds())

      const year = now.getFullYear()
      const month = this.padZero(now.getMonth() + 1) // 补充月份补零，避免单数字月份（如3月显示为"3"）
      const day = this.padZero(now.getDate()) // 补充日期补零

      // 时间格式更新为：时:分:秒
      this.time = `${hours}：${minutes}：${seconds}`
      // 日期格式优化：月份和日期补零（如2025.3.5 → 2025.03.05）
      this.YMD = `${year}.${month}.${day}`
    },
    // 补零函数保持不变（确保时分秒都是两位数）
    padZero(num) {
      return num < 10 ? '0' + num : num
    }
  },
  mounted() {
    // 初始化时间
    this.updateTime()
    // 设置定时器，每秒更新一次时间
    this.timeTimer = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    // 组件销毁前清除定时器，防止内存泄漏
    if (this.timeTimer) {
      clearInterval(this.timeTimer)
    }
  }
}
</script>

<style scoped lang="scss">
.report-header {
  width: 1920px;
  height: 72px;
  background: #FFFFFF;
  box-shadow: 0px 1px 4px 0px rgba(0, 21, 41, 0.12);
  display: flex;
  justify-content:space-between;
  align-items: center;
  position: relative;
  padding: 0 20px;

  // .logo {
  //   position: absolute;
  //   left: 40px;
  //   top: 15px;
  //   height: auto;
  //   object-fit: contain;
  // }
  .header-right{
    display: flex;
    gap: 15px;
  }
  h1 {
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    color: #FFFFFF;
    letter-spacing: 28px;
    text-shadow: 1px 7px 2px #002144;
    text-align: center;
    margin: 0;
  }

  // 实时时间样式
  .current-time {
    // position: absolute;
    // right: 100px; // 位于全屏按钮左侧
    // top: 20px;
    color: rgba(0, 0, 0, 0.85); // 假设使用白色文字，可根据实际设计调整
    // font-size: 22px; // 可根据需要调整大小
        font-weight: 600;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 16px;
      line-height: 24px;
      letter-spacing: 1px;
      display: flex;
      flex-direction: column;
      .YMD{
        font-weight: 600;
      }
      .time{
      // width: 87px;
      //   height: 14px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 16px;
        color:rgba(0, 0, 0, 0.85);;
        // line-height: 14px;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
      }
  }

  .screen-btn {
    color: #00fff0;
    font-size: 26px;
    position: absolute;
    right: 21px;
    top: 85px;
    transform: translateY(-50%);
    padding: 0;
  }
}
</style>