各工厂数据

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>

src/views/copilot/components/FactorySelect.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="factory-select">
+    <div class="label-box" @click="openList">
+      <span>{{ companyName }}</span>
+      <span
+        class="triangle"
+        :style="{ transform: isOpen ? 'rotate(90deg)' : 'rotate(0deg)' }"
+      ></span>
+    </div>
+    <div class="option-list" v-show="isOpen">
+      <div
+        v-for="item in company"
+        :key="item.id"
+        @click="chooseCompany(item.id, item.name)"
+      >
+        {{ item.name }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: "FactorySelect",
+  props: {
+    companyName: {
+      type: String,
+    },
+    companyId: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      isOpen: false,
+      company: [
+        { id: "1", name: "瑞昌中建材光电材料有限公司" },
+        { id: "2", name: "邯郸中建材光电材料有限公司" },
+        { id: "3", name: "株洲中建材光电材料有限公司" },
+        { id: "4", name: "佳木斯中建材光电材料有限公司" },
+        { id: "5", name: "成都中建材光电材料有限公司" },
+        { id: "6", name: "凯盛中建材光电材料有限公司" },
+        { id: "7", name: "蚌埠中建材光电材料有限公司" },
+      ],
+    };
+  },
+  methods: {
+    openList() {
+      this.isOpen = !this.isOpen;
+    },
+    chooseCompany(id, name) {
+      // this.companyId = id;
+      // this.companyName = name;
+      this.$emit("updateCompany", { companyName: name, companyId: id });
+      this.isOpen = false;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.factory-select {
+  width: 100%;
+  position: relative;
+  .label-box {
+    flex: 1;
+    position: relative;
+    background: #006acd40;
+    backdrop-filter: blur(3px);
+    padding: 12px;
+    padding-left: 20px;
+    color: #fff;
+    font-size: 22px;
+    cursor: pointer;
+  }
+  .label-box::before,
+  .label-box::after {
+    content: "";
+    position: absolute;
+    width: 16px;
+    height: 16px;
+    top: 0;
+    background: transparent;
+    border-style: solid;
+    border-width: 2px;
+    border-color: transparent;
+    border-top-color: #007be4;
+  }
+
+  .label-box::before {
+    left: 0;
+    border-left-color: #007be4;
+  }
+
+  .label-box::after {
+    right: 0;
+    border-right-color: #007be4;
+  }
+  .triangle {
+    position: absolute;
+    right: 15px;
+    top: 18px;
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-top: 12px solid transparent;
+    border-bottom: 12px solid transparent;
+    border-left: 12px solid #1d74d8;
+  }
+  .option-list {
+    width: 100%;
+    position: absolute;
+    z-index: 1000;
+    div {
+      padding-left: 23px;
+      font-size: 20px;
+      width: 100%;
+      height: 44px;
+      line-height: 44px;
+      background-color: rgba(1, 34, 86, 0.8);
+      cursor: pointer;
+    }
+    div:hover {
+      background-color: rgba(0, 106, 205, 0.61);
+    }
+  }
+  .option-list::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(1, 34, 86, 0.9);
+    filter: blur(2px);
+    z-index: -1;
+  }
+}
+</style>