<!-- * @Author: your name * @Date: 2022-03-25 17:15:31 * @LastEditTime: 2022-03-29 10:09:52 * @LastEditors: Please set LastEditors * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue --> <template> <div class="czcard"> <my-collapse title="场站" ref="myCollapse" :listNum="czList.filter((item) => item.show).length" > <template v-slot:chackbox> <FilterVue :filterList="filterList" @fliterTypeChange="fliterTypeChange" /> </template> <template #container> <div class="container" :class="{ start: getShowNum }"> <div v-for="(item, index) in czList" :key="item.deviceName + index" v-show="item.show" > <CzItem ref="czItem" :list="item" v-if="item.show" /> </div> </div> </template> </my-collapse> </div> </template> <script> import MyCollapse from "./MyCollapse"; import CzItem from "./CzItem"; import FilterVue from "./FilterVue"; export default { // 场站 components: { MyCollapse, CzItem, FilterVue, }, data() { return { carHide: true, addStartNum: 3, filterList: [ { value: "全部", count: 6, type: "all" }, { value: "加气站", count: 2, type: 1 }, { value: "门站", count: 0, type: 2 }, { value: "调压站", count: 0, type: 3 }, { value: "储备站", count: 0, type: 4 }, { value: "气化站", count: 4, type: 5 }, ], deviceTypeArr: [1, 2, 3, 4], czList: [ { deviceName: "中诚燃气门站", state: 1, a: 12, b: 57.7, c: 0.46, d: 54.2, // e: 56, image: "", show: true, type: 1, }, { deviceName: "平山中燃气站", state: 1, a: 13.1, b: 64.3, c: 0.51, d: 48.2, // e: 56, image: "", show: true, type: 1, }, // { // deviceName: "门站", // state: 2, // a: 25, // b: 56, // c: 54, // d: 15, // e: 56, // image: "", // show: true, // type: 2, // }, // { // deviceName: "调压站", // state: 1, // a: 25, // b: 56, // c: 54, // d: 15, // e: 56, // image: "", // show: true, // type: 3, // }, // { // deviceName: "储备站", // state: 1, // a: 25, // b: 56, // c: 54, // d: 15, // e: 56, // image: "", // show: true, // type: 4, // }, { deviceName: "隆和气化站", state: 1, a: 15.2, b: 52.9, c: 0.49, d: 54, // e: 56, image: "", show: true, type: 5, }, { deviceName: "温塘气化站", state: 1, a: 12.6, b: 61.8, c: 0.47, d: 49, // e: 56, image: "", show: true, type: 5, }, { deviceName: "93701部队气化站", state: 1, a: 14.6, b: 56.5, c: 0.58, d: 47.6, // e: 56, image: "", show: true, type: 5, }, { deviceName: "隆城绿都气化站", state: 1, a: 12.5, b: 54, c: 0.52, d: 50, // e: 56, image: "", show: true, type: 5, }, // { // deviceName: "储备站", // state: 1, // a: 25, // b: 56, // c: 54, // d: 15, // e: 56, // image: "", // show: true, // type: 4, // }, ], }; }, computed: { // 计算有多少个展示的对象,如果小于3个,就把justify-content: space-between;取消 getShowNum() { return this.czList.filter((item) => item.show).length < this.addStartNum; }, }, mounted() { this.changeAddStartNum(); }, methods: { hide() { this.carHide = !this.carHide; // this.myCollapse(); }, // 根据父子元素自动计算是否需要添加值start changeAddStartNum() { const czItem = this.$refs.czItem; let czItemWidth; // 组件有可能是一个数组,所以要这样判断 if (Array.isArray(czItem)) { const { width } = czItem[0].$el.getBoundingClientRect(); czItemWidth = width; } else { const { width } = czItem.$el.getBoundingClientRect(); czItemWidth = width; } // 取出collap的宽 const { width: CollapseWidth } = this.$refs.myCollapse.$el.getBoundingClientRect(); // 得到最小的承载数量 this.addStartNum = Math.floor(CollapseWidth / czItemWidth); }, //过滤选择 fliterTypeChange(data) { this.filter([...data]); // 改变大小,因为动画原因加个延迟 // this.$nextTick(() => { // setTimeout(()=>{ // this.myCollapse() // }, 300); // }); }, myCollapse() { // this.$refs.myCollapse.getHeight(); }, // 过滤对象 filter(arr) { this.czList.forEach((item) => { const { type } = item; if (arr.includes(type)) { item.show = true; } else { item.show = false; } }); }, }, }; </script> <style lang="scss" scoped> .container { width: 100%; flex-wrap: wrap; display: flex; &.start { justify-content: flex-start; & > div { // margin-right: 50px; } } & > div { margin-bottom: 20px; margin-left: 1%; width: 24%; min-width: 295px; border: 1px solid #e6ebf5; border-radius: 4px; box-sizing: border-box; } } .flex { display: flex; justify-content: space-between; } </style>