各工厂数据

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>