<!-- * @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>