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

<template>
  <div class="factory-header">
    <section class="menu1">
      <!-- <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 dataList" :key="i.id" :label="i.name" :active="i.id === period"
        @click="() => $emit('update:period', i.id)" />
      <!-- <CopilotButton v-for="i in ['同比', '环比']" :key="i" :label="i" :active="i === than"
        @click="() => $emit('update:than', i)" /> -->
    </section>
    <div class="page-title">{{ companyName }}</div>
    <section class="menu2">
      <div class="btn-group">
        <el-tooltip class="item" effect="dark" content="导出" placement="top">
          <button type="button" class="export-btn" @click="handleExport" />
        </el-tooltip>
        <el-tooltip class="item" effect="dark" :content="isFullscreen  === false ? '退出全屏' : '全屏'" placement="top">
          <button type="button" class="fullscreen-btn" :class="[isFullscreen ? 'exit-fullscreen' : '']"
            @click="toggleFullScreen" />
        </el-tooltip>
      </div>
    </section>
  </div>
</template>

<script>
// import CopilotButton from "./button.vue";
import FactorySelect from "./FactorySelect.vue";
import screenfull from "screenfull";
import CopilotButton from "./button.vue";
import { exportFactoryDataExcel } from "@/api/produceData";

export default {
  name: "FactoryDataHeader",
  components: { CopilotButton, FactorySelect },
  props: {
    companyName: {
      type: String,
    },
    companyId: {
      type: Number,
    },
    period: {
      type: Number,
    },
    than: {
      type: String,
    },
  },
  data() {
    return {
      isFullscreen: false,
      content:'全屏',
      dataList: [
        { id: 1, name: "日" },
        { id: 2, name: "周" },
        { id: 3, name: "月" },
        { id: 4, name: "年" },
      ],
    };
  },
  computed: {},
  methods: {
    handleExport() {
      if (this.period != 1) {
        exportFactoryDataExcel({
          factoryId: this.companyId,
          timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
          compare: this.than === '同比' ? 1 : 2
        }).then(response => {
          this.$download.excel(response, `${this.companyName}生产数据.xls`);
          // this.exportLoading = false;
        }).catch(() => { });
      } else {
        this.$message({
          type: 'warning',
          message: '为日的情况下没有导出功能',
        })
      }

    },
    toggleFullScreen() {
      this.isFullscreen = !this.isFullscreen;

      screenfull.toggle(document.querySelector(".factory-layout"));
      // 矫正宽度
      // const el = document.querySelector(".factory-layout");
      // el.style.width = this.isFullscreen ? "100vw" : "calc(100vw - 54px)";
      // el.style.left = this.isFullscreen ? "0" : "54px";
    },
    updateCompany(obj) {
      this.$emit("updateCompany", obj);
    },
  },
};
</script>

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

.factory-header {
  display: flex;
  gap: 12px;
  align-items: center;
}

.factory-header > .menu1 {
  width: 20vw;
  display: flex;
  align-items: center;
  gap: 8px;
}
.factory-header > .menu2 {
  width: 20vw;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.export-btn,
.fullscreen-btn {
  /* float: right; */
  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 1 auto;
  font-size: 40px;
  line-height: 70px;
  letter-spacing: 5px;
  font-family: 优设标题黑;
  color: #6db6ff;
  text-align: center;
  user-select: none;
  background: url(../../../assets/images/homeindex/page-title-two.png) 0 0 / 100% 100% no-repeat;
}
</style>