大屏

2025-11-18 09:31:39 +08:00
parent 0e1e813dc2
commit c0a38c568f
60 changed files with 4703 additions and 220 deletions
--- a/src/views/productionVisualization/equipmentBoard/components/Header.vue
+++ b/src/views/productionVisualization/equipmentBoard/components/Header.vue
@@ -0,0 +1,170 @@
+<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>