yudao-init/src/views/copilot/components/CopilotHeader.vue

<!--
    filename: CopilotHeader.vue
    author: liubin
    date: 2024-04-16 15:14:01
    description:
-->

<template>
  <div class="copilot-header">
    <section class="menu">
      <CopilotButton v-for="i in ['产量', '效率']" :key="i" :label="i" :active="i === active"
        @click="() => $emit('update:active', i)" />
      <div class="type-name"></div>
      <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
        @click="() => $emit('update:than', i)" />
    </section>
    <div class="page-title">{{ active }}驾驶舱</div>
    <section class="menu" style="width: 24vw;float: right;">
      <CopilotButton v-for="i in ['日', '周', '月', '年']" :key="i" :label="i" :active="i === period"
        @click="() => $emit('update:period', i)" />
      <div class="btn-group">
        <button type="button" class="export-btn" />
        <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
          @click="toggleFullScreen" />
        <!-- <button class="times-btn"> {{ times }} </button> -->
      </div>
    </section>
  </div>
</template>

<script>
import CopilotButton from "./button.vue";
import screenfull from "screenfull";

export default {
  name: "CopilotHeader",
  components: { CopilotButton },
  props: {
    active: {
      type: String,
    },
    period: {
      type: String,
    },
    than: {
      type: String,
    },
  },
  data() {
    return {
      times:'',
      isFullscreen: false,
    };
  },
  mounted () {
    this.getTimes()
    this.getTimesInterval();
  },
  computed: {},
  methods: {
    getTimes() {
      setInterval(this.getTimesInterval, 60000);
    },
    getTimesInterval() {
      var now = new Date();
      var weekDay = now.getDay();
      var weeks = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
      var week = weeks[weekDay]
      let _this = this;
      let year = new Date().getFullYear(); //获取当前时间的年份
      let month = new Date().getMonth() + 1; //获取当前时间的月份
      let day = new Date().getDate(); //获取当前时间的天数
      let hours = new Date().getHours(); //获取当前时间的小时
      let minutes = new Date().getMinutes(); //获取当前时间的分数
      // let seconds = new Date().getSeconds(); //获取当前时间的秒数
      //当小于 10 的是时候，在前面加 0
      if (hours < 10) {
        hours = '0' + hours;
      }
      if (minutes < 10) {
        minutes = '0' + minutes;
      }
      // if (seconds < 10) {
      //   seconds = '0' + seconds;
      // }
      //拼接格式化当前时间
      this.times =

        year +
        '.' +
        month +
        '.' +
      day +
      "  " + hours +
      '.' +
      minutes +
      '.' +
      week
    },
    toggleFullScreen() {
      this.isFullscreen = !this.isFullscreen;
      screenfull.toggle(document.querySelector(".copilot-layout"))
      // 矫正宽度
      // const el = document.querySelector(".copilot-layout");
      // el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
      // el.style.left = this.isFullscreen ? "0" : "54px";
    },
  },
};
</script>

<style scoped>
@font-face {
  font-family: 优设标题黑;
  src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
}

.copilot-header {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.copilot-header > section {
  width: 26vw;
  display: flex;
  align-items: center;
  gap: 8px;
}

.export-btn,
.fullscreen-btn {
  width: 32px;
  height: 32px;
  margin-left: 24px;
  cursor: pointer;
}

.times-btn {
  width: 240px;
  height: 32px;
  margin-left: 24px;
  cursor: pointer;
  color: white;
  font-size: 20px;
  line-height: 30px;
  float: right;
  /* margin-bottom: 20px; */
}
.export-btn {
  background: url(../../../assets/images/export-icon.png) 0 0 / 100% 100%
    no-repeat;
}

.fullscreen-btn {
  background: url(../../../assets/images/full-icon.png) 0 0 / 100% 100%
    no-repeat;
}
.exit-fullscreen {
  background: url(../../../assets/images/homeindex/exit-fullscreen.png) 0 0 / 100% 100%
    no-repeat;
}
    .type-name {
      /* content: ""; */
      display: inline-block;
      width: 1px;
    height: 59px;
    border: 1px solid;
    opacity: 0.9;
    border-image: linear-gradient(180deg, rgba(0, 176, 243, 0), rgba(88, 194, 255, 1), rgba(0, 120, 228, 0)) 2 2;
      /* position: absolute; */
      /* left: 0; */
      /* top: 10px; */
    }
.page-title {
  width: 25vw;
  font-size: 54px;
  line-height: 70px;
  letter-spacing: 5px;
  font-family: 优设标题黑;
  color: #6db6ff;
  text-align: center;
  user-select: none;
  background: url(../../../assets/images/homeindex/page-title.png) 0 0 / 100% 100% no-repeat;
}
</style>