过滤功能样式修改完毕

gassafetyprogress-web/src/assets/iconfont/monitorData/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 3276749 */
-  src: url('//at.alicdn.com/t/font_3276749_mh99rhny3b.woff2?t=1648459448822') format('woff2'),
-       url('//at.alicdn.com/t/font_3276749_mh99rhny3b.woff?t=1648459448822') format('woff'),
-       url('//at.alicdn.com/t/font_3276749_mh99rhny3b.ttf?t=1648459448822') format('truetype');
+  src: url('//at.alicdn.com/t/font_3276749_riyy29xphqo.woff2?t=1648520277704') format('woff2'),
+       url('//at.alicdn.com/t/font_3276749_riyy29xphqo.woff?t=1648520277704') format('woff'),
+       url('//at.alicdn.com/t/font_3276749_riyy29xphqo.ttf?t=1648520277704') format('truetype');
 }
 
 .iconfont {
@@ -13,8 +13,12 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-guanbi:before {
-  content: "\e661";
+.icon-bingo:before {
+  content: "\e625";
+}
+
+.icon-x:before {
+  content: "\e600";
 }
 
 .icon-jt:before {

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-28 18:05:38
+ * @LastEditTime: 2022-03-29 11:11:54
  * @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
@@ -15,7 +15,11 @@
       :listNum="czList.filter((item) => item.show).length"
     >
       <template v-slot:chackbox>
-        <div
+       <FilterVue2
+          :filterList="filterList"
+          @fliterTypeChange="fliterTypeChange"
+        />
+        <!-- <div
           class="filter"
           :class="`one-${item.state}`"
           v-for="item in filterList"
@@ -28,7 +32,7 @@
             >{{ item.value }}</span
           >
           <span class="number">({{ item.count }})</span>
-        </div>
+        </div> -->
       </template>
       <template #container>
         <div class="container flex">
@@ -94,11 +98,13 @@
 <script>
 import MyCollapse from "./MyCollapse";
 import CzItem from "./CzItem";
+import FilterVue2 from "./FilterVue2";
 // 场罐
 export default {
   components: {
     MyCollapse,
     CzItem,
+    FilterVue2,
   },
   data() {
     return {
@@ -106,6 +112,7 @@ export default {
       visible: true,
       addStartNum: 3,
       filterList: [
+        { value: "全部", count: 100, state: "all" },
         { value: "正常", count: 100, state: 1 },
         { value: "报警", count: 100, state: 2 },
         { value: "离线", count: 100, state: 3 },
@@ -293,14 +300,14 @@ export default {
     },
     //过滤选择
     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(this.deviceTypeArr);
+      // 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) {
@@ -341,7 +348,6 @@ $active: #06d7b1 !important;
       top: 50%;
       margin-top: -3px;
     }
-
     &.active {
       color: $active;
     }
@@ -359,33 +365,18 @@ $active: #06d7b1 !important;
     .text {
       color: $one;
     }
-    .text {
-      &:before {
-        background-color: $one;
-      }
-    }
   }
   &.one-2 {
     .number,
     .text {
       color: $two;
     }
-    .text {
-      &:before {
-        background-color: $two;
-      }
-    }
   }
   &.one-3 {
     .number,
     .text {
       color: $three;
     }
-    .text {
-      &:before {
-        background-color: $three;
-      }
-    }
   }
 }
 .container {

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-28 18:04:53
+ * @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
@@ -15,15 +15,10 @@
       :listNum="czList.filter((item) => item.show).length"
     >
       <template v-slot:chackbox>
-        <div class="filter" v-for="item in filterList" :key="item.value">
-          <span
-            class="text"
-            :class="{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
-            @click="fliterTypeChange(item)"
-            >{{ item.value }}</span
-          >
-          <span class="number">({{ item.count }})</span>
-        </div>
+        <FilterVue
+          :filterList="filterList"
+          @fliterTypeChange="fliterTypeChange"
+        />
       </template>
       <template #container>
         <div class="container" :class="{ start: getShowNum }">
@@ -43,18 +38,21 @@
 <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: 100, type: "all" },
         { value: "加气站", count: 100, type: 1 },
         { value: "门站", count: 100, type: 2 },
         { value: "调压站", count: 100, type: 3 },
@@ -148,7 +146,6 @@ export default {
           type: 4,
         },
       ],
-    
     };
   },
   computed: {
@@ -185,14 +182,7 @@ export default {
     },
     //过滤选择
     fliterTypeChange(data) {
-      const { type } = data;
-      const index = this.deviceTypeArr.indexOf(type);
-      if (index >= 0) {
-        this.deviceTypeArr.splice(index, 1);
-      } else {
-        this.deviceTypeArr.push(type);
-      }
-      this.filter(this.deviceTypeArr);
+      this.filter([...data]);
       // 改变大小,因为动画原因加个延迟
       // this.$nextTick(() => {
       //   setTimeout(()=>{
@@ -219,24 +209,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.filter {
-  margin-right: 12px;
-  margin-top: 5px;
-  font-size: 14px;
-  .text {
-    cursor: pointer;
-    &:hover {
-      color: #06d7b189 !important;
-    }
-    &.active {
-      color: #06d7b1;
-    }
-  }
-  .number {
-    font-weight: 500;
-    color: #1890ff;
-  }
-}
+
 .container {
   width: 100%;
   flex-wrap: wrap;

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-29 09:41:23
+ * @LastEditTime: 2022-03-29 11:08:25
+ * @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/Filter.vue
+-->
+<template>
+  <div class="fliter-vue">
+    <div class="filter" v-for="(item, index) in filterList" :key="item.value">
+      <!-- 全部 -->
+      <template v-if="index == 0">
+        <span
+          class="text"
+          :class="{
+            active: deviceTypeArr.length == filterList.length - 1
+          }"
+          @click="fliterTypeChange(item)"
+          >{{ item.value }}
+          <i class="iconfont icon-bingo"></i>
+        </span>
+        <span class="number">({{ item.count }})</span>
+      </template>
+      <template v-else>
+        <span
+          class="text"
+          :class="{ active: deviceTypeArr.indexOf(item.type) >= 0 }"
+          @click="fliterTypeChange(item)"
+          >{{ item.value }}
+          <i class="iconfont icon-bingo"></i>
+        </span>
+        <span class="number">({{ item.count }})</span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      deviceTypeArr: [],
+      allArray: [],
+    };
+  },
+  props: {
+    // 传进来的参数
+    filterList: Array,
+  },
+  created() {
+    this.deviceTypeArr = this.filterList
+      .filter((item) => item.type > 0)
+      .map((item) => item.type);
+    // 全选时的数组内容
+    this.allArray = [...this.deviceTypeArr];
+  },
+  methods: {
+    fliterTypeChange(data) {
+      const { type } = data;
+      // 如果点的是全选
+      if (type == "all") {
+        if (this.deviceTypeArr.length == this.filterList.length - 1) {
+          this.deviceTypeArr = [];
+        } else {
+          this.deviceTypeArr = [...this.allArray];
+        }
+      } else {
+        const index = this.deviceTypeArr.indexOf(type);
+        if (index >= 0) {
+          this.deviceTypeArr.splice(index, 1);
+        } else {
+          this.deviceTypeArr.push(type);
+        }
+      }
+      this.$emit("fliterTypeChange", [...this.deviceTypeArr]);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.fliter-vue {
+  display: flex;
+}
+.filter {
+  margin-right: 30px;
+  margin-top: 5px;
+  font-size: 14px;
+  .text {
+    cursor: pointer;
+    position: relative;
+    .iconfont {
+      font-size: 10px;
+      position: absolute;
+      left: -12px;
+      top: 0px;
+      color: rgba(0, 0, 0, 0);
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border: 1px solid #000000;
+      left: -12px;
+      top: 50%;
+      margin-top: -5px;
+    }
+    &:hover {
+      .iconfont {
+        font-size: 10px;
+        position: absolute;
+        left: -12px;
+        color: rgba(0, 0, 0, .5);
+      }
+    }
+    &.active {
+       .iconfont {
+        font-size: 10px;
+        position: absolute;
+        left: -12px;
+        color: rgba(0, 0, 0, 1);
+      }
+    }
+  }
+  .number {
+    font-weight: 500;
+    color: #1890ff;
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/FilterVue2.vue

+<!--
+ * @Author: your name
+ * @Date: 2022-03-29 09:41:23
+ * @LastEditTime: 2022-03-29 11:14:11
+ * @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/Filter.vue
+-->
+<template>
+  <div class="fliter-vue">
+    <div
+      class="filter"
+      v-for="(item, index) in filterList"
+      :key="item.value"
+      :class="`one-${item.state}`"
+    >
+      <!-- 全部 -->
+      <template v-if="index == 0">
+        <span
+          class="text"
+          @click="fliterTypeChange(item)"
+          :class="{ active: deviceTypeArr.length == filterList.length - 1}"
+          >{{ item.value }}
+          <i class="iconfont icon-bingo"></i>
+        </span>
+        <span class="number">({{ item.count }})</span>
+      </template>
+      <template v-else>
+        <span
+          class="text"
+          :class="{ active: deviceTypeArr.indexOf(item.state) >= 0 }"
+          @click="fliterTypeChange(item)"
+          >{{ item.value }}
+          <i class="iconfont icon-bingo"></i>
+        </span>
+        <span class="number">({{ item.count }})</span>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      deviceTypeArr: [],
+      allArray: [],
+    };
+  },
+  props: {
+    // 传进来的参数
+    filterList: Array,
+  },
+  created() {
+    this.deviceTypeArr = this.filterList
+      .filter((item) => item.state > 0)
+      .map((item) => item.state);
+    // 全选时的数组内容
+    this.allArray = [...this.deviceTypeArr];
+  },
+  methods: {
+    fliterTypeChange(data) {
+      const { state } = data;
+      // 如果点的是全选
+      if (state == "all") {
+        if (this.deviceTypeArr.length == this.filterList.length - 1) {
+          this.deviceTypeArr = [];
+        } else {
+          this.deviceTypeArr = [...this.allArray];
+        }
+      } else {
+        const index = this.deviceTypeArr.indexOf(state);
+        if (index >= 0) {
+          this.deviceTypeArr.splice(index, 1);
+        } else {
+          this.deviceTypeArr.push(state);
+        }
+      }
+      this.$emit("fliterTypeChange", [...this.deviceTypeArr]);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+$one: #06d7b1 !important;
+$two: #ff6c68 !important;
+$three: #bbbbbb !important;
+$all: #000000;
+.fliter-vue {
+  display: flex;
+}
+.filter {
+  margin-right: 30px;
+  margin-top: 5px;
+  font-size: 14px;
+
+  .text {
+    cursor: pointer;
+    position: relative;
+    .iconfont {
+      font-size: 10px;
+      position: absolute;
+      left: -12px;
+      top: 0px;
+      color: rgba(0, 0, 0, 0);
+    }
+    &:before {
+      content: "";
+      position: absolute;
+      width: 10px;
+      height: 10px;
+      border: 1px solid #000000;
+      left: -12px;
+      top: 50%;
+      margin-top: -5px;
+    }
+    &:hover {
+      .iconfont {
+        font-size: 10px;
+        position: absolute;
+        left: -12px;
+        color: rgba(0, 0, 0, .5);
+      }
+    }
+    &.active {
+       .iconfont {
+        font-size: 10px;
+        position: absolute;
+        left: -12px;
+        color: rgba(0, 0, 0, 1);
+      }
+    }
+  }
+  .number {
+    font-weight: 500;
+    color: #1890ff !important;
+  }
+
+  &.one-all {
+    .number,
+    .text {
+      color: $all;
+    }
+  }
+  &.one-1 {
+    .number,
+    .text {
+      color: $one;
+    }
+  }
+  &.one-2 {
+    .number,
+    .text {
+      color: $two;
+    }
+  }
+  &.one-3 {
+    .number,
+    .text {
+      color: $three;
+    }
+  }
+}
+</style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-28 15:03:20
+ * @LastEditTime: 2022-03-29 10:12:49
  * @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
@@ -47,7 +47,7 @@ export default {
     // 动画需求
     listNum: {
       type: Number,
-      default:"1"
+      default: "1",
     },
   },
 
@@ -66,7 +66,8 @@ export default {
       setTimeout(this.getHeight, 200);
       // this.getHeight();
     },
-    listNum() {
+    listNum(val) {
+      console.log(val);
       setTimeout(() => {
         this.getHeight();
       }, 300);
@@ -75,16 +76,17 @@ export default {
   mounted() {
     this.getHeight();
   },
-
   methods: {
     hide() {
       this.carHide = !this.carHide;
+      this.getHeight();
     },
     getHeight() {
       const { height } = this.$refs?.container?.getBoundingClientRect();
-      if (!height) {
-        return;
-      }
+      // if (!height) {
+
+      //   return;
+      // }
       // 高度必须是一个指定的值才能过渡变化，这样就计算出了整个元素的指定高度，然后赋值
       if (height > 0) {
         this.transitionHeight = height + 60 + 18 + "px";