<!-- * @Author: your name * @Date: 2022-03-25 17:15:31 * @LastEditTime: 2022-04-26 15:06:57 * @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="chars-card"> <my-collapse title="储罐" ref="myCollapse" :listNum="czList.filter((item) => item.show).length" > <template v-slot:chackbox> <FilterVue2 :filterList="filterList" @fliterTypeChange="fliterTypeChange" /> <!-- <div class="filter" :class="`one-${item.state}`" v-for="item in filterList" :key="item.value" > <span class="text" :class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }" @click="fliterTypeChange(item)" >{{ item.value }}</span > <span class="number">({{ item.count }})</span> </div> --> </template> <template #container> <div class="container flex"> <div class="com" v-for="(item, index) in czList" :key="item.deviceName" v-show="item.show" > <el-popover :ref="'popo' + index" placement="right-end" width="330" trigger="click" popper-class="paddingnone" > <div class="cz-item"> <div class="title"> <div class="text"> {{ item.companyName }} </div> <div @click="change(index)" class="x"> <i class="iconfont icon-x"></i> </div> </div> <CzItem ref="czItem" :list="item" :changeStyle="true" :stateType="stateType" /> </div> <template slot="reference"> <div class="flex"> <div :title="item.companyName" class="left zzz"> {{ item.companyName }} </div> <div :class="`one-${item.state}`" class="state" @click="change" > {{ typeState[item.state - 1] }} </div> </div> </template> <!-- <el-button slot="reference">click 激活</el-button> --> </el-popover> <!-- <div :title="item.companyName" class="left zzz"> {{ item.companyName }} </div> <div :class="`one-${item.state}`" class="state"> {{ typeState[item.state - 1] }} </div> --> </div> </div> </template> </my-collapse> </div> </template> <script> import MyCollapse from "./MyCollapse"; import CzItem from "./CzItem"; import FilterVue2 from "./FilterVue2"; // 场罐 export default { components: { MyCollapse, CzItem, FilterVue2, }, data() { return { carHide: true, visible: true, addStartNum: 3, filterList: [ { value: "全部", count: 17, state: "all" }, { value: "正常", count: 16, state: 1 }, { value: "报警", count: 0, state: 2 }, { value: "离线", count: 1, state: 3 }, ], typeState: ["正常", "报警", "离线"], deviceTypeArr: [1, 2, 3], czList: [ { companyName: "中诚燃气门站储罐1", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "中诚燃气门站储罐2", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "平山中燃气站储罐1", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "平山中燃气站储罐2", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "隆和气化站储罐1", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "隆和气化站储罐2", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "温塘气化站储罐1", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "温塘气化站储罐2", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "93701部队气化站储罐1", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "93701部队气化站储罐2", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "隆城绿都气化站储罐1", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "隆城绿都气化站储罐2", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: true, }, { companyName: "中诚燃气罐车1", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: false, }, { companyName: "中诚燃气罐车2", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: false, }, { companyName: "中诚燃气罐车3", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, popoVidible: false, }, { companyName: "中诚燃气罐车4", state: 1, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, }, { companyName: "中诚燃气罐车5", state: 3, a: 25, b: 56, c: 54, d: 15, e: 56, image: "", show: true, }, ], stateType: { 1: "正常", 2: "报警", 3: "离线", }, }; }, 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; }, change(index) { this.$refs["popo" + index][0].showPopper = false; }, // 根据父子元素自动计算是否需要添加值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) { // const { state } = data; // const index = this.deviceTypeArr.indexOf(state); // if (index >= 0) { // this.deviceTypeArr.splice(index, 1); // } else { // this.deviceTypeArr.push(state); // } this.filter([...data]); }, // 过滤对象 filter(arr) { this.czList.forEach((item) => { const { state } = item; if (arr.includes(state)) { item.show = true; } else { item.show = false; } }); }, }, }; </script> <style lang="scss" scoped> $one: #666666; $two: #ff6c68; $three: #bbbbbb; $active: #06d7b1 !important; .filter { margin-right: 22px; margin-top: 5px; font-size: 14px; .text { position: relative; cursor: pointer; &::before { content: ""; position: absolute; border-radius: 50%; width: 6px; height: 6px; left: -10px; top: 50%; margin-top: -3px; } &.active { color: $active; } &:hover { color: #06d7b189 !important; } } .number { font-weight: 500; } &.one-1 { .number, .text { color: $one; } } &.one-2 { .number, .text { color: $two; } } &.one-3 { .number, .text { color: $three; } } } .container { width: 100%; flex-wrap: wrap; margin-left: 35px; justify-content: flex-start; &.start { // justify-content: flex-start; & > div { // margin-right: 50px; } } .com { margin-bottom: 20px; display: flex; justify-content: flex-start; // margin-right: 45px; width: 15%; min-width: 190px; margin-right: 1.5%; .left { margin-right: 4px; font-size: 14px; max-width: 112px; cursor: pointer; } .state { font-size: 8px; padding: 0px 4px; box-sizing: border-box; &.one-1 { color: #fff; border: 1px solid #6fffe5; border-radius: 2px; background-color: #06d7b1; } &.one-2 { color: #fff; border: 1px solid #ff9c99; border-radius: 2px; background-color: #ff6c68; } &.one-3 { color: #fff; border: 1px solid #aaaaaa; border-radius: 2px; background-color: #bbbbbb; } } } } .flex { display: flex; // justify-content: flex-start; } .cz-item { .title { display: flex; justify-content: space-between; // height: 20px; border-bottom: 1px solid #e6ebf5; box-sizing: border-box; padding: 13px 0px 6px 10px; .text { font-size: 13px; color: #666666; padding-left: 10px; } .x { color: #666666; padding-right: 10px; cursor: pointer; .iconfont { font-size: 12px; &::hover { color: #000000; } } } } } .paddingnone { padding: 0; } </style>