各工厂数据

src/views/copilot/components/FactoryDataHeader.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="factory-header">
+    <section class="menu1">
+      <FactorySelect
+        :companyName="companyName"
+        :companyId="companyId"
+        @updateCompany="updateCompany"
+      />
+    </section>
+    <section class="menu2">
+      <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">{{ companyName }}</div>
+  </div>
+</template>
+
+<script>
+import CopilotButton from "./button.vue";
+import FactorySelect from "./FactorySelect.vue";
+import screenfull from "screenfull";
+
+export default {
+  name: "FactoryDataHeader",
+  components: { CopilotButton, FactorySelect },
+  props: {
+    companyName: {
+      type: String,
+    },
+    companyId: {
+      type: String,
+    },
+    period: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isFullscreen: false,
+    };
+  },
+  computed: {},
+  methods: {
+    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: 24vw;
+  /* display: flex;
+  align-items: center;
+  gap: 8px; */
+}
+.factory-header > .menu2 {
+  width: 30vw;
+  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: 40px;
+  line-height: 70px;
+  letter-spacing: 5px;
+  font-family: 优设标题黑;
+  color: #6db6ff;
+  text-align: right;
+  user-select: none;
+}
+</style>