更新一下

zh-baseversion-web/src/views/bigWindow/components/BottomOld.vue

+<!--
+ * @Author: 纪泽龙 jizelong@qq.com
+ * @Date: 2023-07-12 13:58:25
+ * @LastEditors: 纪泽龙 jizelong@qq.com
+ * @LastEditTime: 2023-07-12 17:12:59
+ * @FilePath: /gassafetyprogress-web/src/views/bigWindow/components/Bottom.vue
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+-->
+<template>
+  <div class="bigwindow-bottom listingsSty">
+    <img
+      src="~@/assets/firstimage/bottombk.svg"
+      alt=""
+      style="backdrop-filter: blur(4px)"
+    />
+    <div class="listingsSty">
+      <div
+        class="firsty selectAll"
+        @click.stop="selectAll"
+        :class="[
+          {
+            active:
+              selectActive.length == listFlatArr.length &&
+              selectActive.length > 1,
+          },
+        ]"
+      >
+        全部
+      </div>
+      <div class="firsty item" v-for="(item, index) in list" :key="item.value">
+        <div
+          class="itemCompany"
+          @click.stop="selectChange(item.value)"
+          :class="[
+            { active: selectSome(index) },
+            { activeAll: selectEvery(index) },
+          ]"
+        >
+          {{ item.label }}
+        </div>
+
+        <div
+          class="up-select"
+          :class="[{ hide: !selectShowNum.includes(item.value) }]"
+          :style="{ height: item.children.length * 35 + 'px' }"
+        >
+          <div
+            class="selectItem"
+            v-for="selectItem in item.children"
+            :class="[{ active: selectActive.includes(selectItem.value) }]"
+            :key="selectItem.value"
+            @click.stop="selectActiveChange(selectItem.value)"
+          >
+            {{ selectItem.label }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from "vuex";
+export default {
+  name: "",
+  data() {
+    return {
+      list: [
+        {
+          value: 1,
+          label: "天然气公司",
+          children: [
+            // { value: 10, label: "东阿道夫阿" },
+            // { value: 11, label: "阿发送到" },
+            // { value: 19, label: "发打算发大水" },
+          ],
+        },
+        {
+          value: 2,
+          label: "液化气公司",
+          children: [
+            // { value: 21, label: "2-1" },
+            // { value: 22, label: "2-2" },
+          ],
+        },
+        {
+          value: 3,
+          label: "加气站",
+          children: [
+            // { value: 31, label: "3-1" },
+            // { value: 32, label: "3-2" },
+          ],
+        },
+      ],
+      selectShowNum: [],
+      // 被选中的值
+      selectActive: [],
+      listFlatArr: [],
+    };
+  },
+  computed: {
+    ...mapGetters(["company", "systemSetting"]),
+  },
+  beforeCreate() {},
+
+  mounted() {
+    this.GetCompany().then((res) => {
+      this.company.forEach((item) => {
+        this.list[item.companyType-1].children.push({
+          value: item.conpanyId,
+          label: item.companyName,
+        });
+      });
+      this.selectAll();
+    });
+  },
+  methods: {
+    ...mapActions({
+      GetCompany: "bigWindowCompany/GetCompany",
+    }),
+    // 把下拉框放下
+    selectUpClear(){
+      this.selectShowNum=[];
+    },
+    selectAll() {
+      // 生成所有都选中的数组
+      this.listFlatArr = this.list
+        .map((item) => {
+          return item.children.map((iten) => {
+            return iten.value;
+          });
+        })
+        .flat();
+
+      // 如果是全选中状态，则全取消，否则全选
+
+      if (this.selectActive.length == this.listFlatArr.length) {
+        this.selectActive = [];
+      } else {
+        this.selectActive = [...this.listFlatArr];
+      }
+      this.$emit("listChange", this.selectActive);
+    },
+    selectChange(value) {
+      const num = this.selectShowNum.indexOf(value);
+      if (num >= 0) {
+        this.selectShowNum.splice(num, 1);
+      } else {
+        this.selectShowNum.push(value);
+      }
+    },
+    selectActiveChange(value) {
+      const num = this.selectActive.indexOf(value);
+      if (num >= 0) {
+        this.selectActive.splice(num, 1);
+      } else {
+        this.selectActive.push(value);
+      }
+      this.$emit("listChange", this.selectActive);
+    },
+    // 至少有一个被选中
+    selectSome(index) {
+      return (
+        this.list[index].children.length > 0 &&
+        this.list[index].children.some((item) => {
+          return this.selectActive.includes(item.value);
+        })
+      );
+    },
+    // 都被选中
+    selectEvery(index) {
+      return (
+        this.list[index].children.length > 0 &&
+        this.list[index].children.every((item) => {
+          return this.selectActive.includes(item.value);
+        })
+      );
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.bigwindow-bottom {
+  width: 40%;
+  height: 70px;
+  position: fixed;
+  bottom: 0;
+  margin-left: 30%;
+  display: flex;
+  // z-index: 1000;
+  img {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: -1;
+    bottom: -10px;
+  }
+  .listingsSty {
+    padding-left: 15%;
+    padding-right: 15%;
+    box-sizing: border-box;
+    width: 180%;
+    display: flex;
+    justify-content: space-between;
+    .firsty {
+      // width: 15%;
+      min-width: 80px;
+      height: 35px;
+      text-align: center;
+      line-height: 35px;
+      color: #fff;
+      font-size: 16px;
+      cursor: pointer;
+      &.selectAll {
+        transition: all 0.5s ease;
+
+        &.active {
+          color: #00ffff;
+          text-shadow: 0 0 20px rgba(0, 255, 255, 1),
+            0 0 35px rgb(0, 255, 255, 1);
+        }
+      }
+
+      &.item {
+        min-width: 180px;
+        position: relative;
+        .itemCompany {
+          transition: all 0.5s ease;
+          &.active {
+            color: #00ffff;
+            text-shadow: 0 0 20px rgba(0, 255, 255, 0.3),
+              0 0 35px rgb(0, 255, 255, 0.3);
+          }
+          &.activeAll {
+            color: #00ffff;
+            text-shadow: 0 0 20px rgba(0, 255, 255, 1),
+              0 0 35px rgb(0, 255, 255, 1);
+          }
+        }
+        .up-select {
+          transition: all 0.5s ease;
+          position: absolute;
+          bottom: 50px;
+          left: 0;
+          width: 100%;
+          background: rgb(18, 92, 155, 0.3);
+          overflow: hidden;
+          &.hide {
+            height: 0px !important;
+          }
+          .selectItem {
+            transition: all 0.5s ease;
+            &.active {
+              color: #00ffff;
+              text-shadow: 0 0 20px #00ffff, 0 0 35px #00ffff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>