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)"
      />
    </section>
    <section class="menu">
      <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"
        />
      </div>
    </section>
    <div class="page-title">{{ active }}驾驶舱</div>
  </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,
    },
  },
  data() {
    return {
      isFullscreen: false,
    };
  },
  computed: {},
  methods: {
    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;
}

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

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

.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;
}

.page-title {
  flex: 1;
  font-size: 54px;
  line-height: 70px;
  letter-spacing: 5px;
  font-family: 优设标题黑;
  color: #6db6ff;
  text-align: right;
  user-select: none;
}
</style>