过滤功能样式修改完毕

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/Fmj.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-28 14:00:33
+ * @LastEditTime: 2022-03-29 11:12:39
  * @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">
+  <div class="chars-card">
     <my-collapse
       title="阀门井"
       ref="myCollapse"
       :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,22 +32,62 @@
             >{{ item.value }}</span
           >
           <span class="number">({{ item.count }})</span>
-        </div>
+        </div> -->
       </template>
       <template #container>
         <div class="container flex">
           <div
             class="com"
-            v-for="item in czList"
+            v-for="(item, index) in czList"
             :key="item.deviceName"
             v-show="item.show"
           >
-            <div :title="item.companyName" class="left zzz">
+            <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>
         </div>
       </template>
@@ -54,18 +98,21 @@
 <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: 100, state: "all" },
         { value: "正常", count: 100, state: 1 },
         { value: "报警", count: 100, state: 2 },
         { value: "离线", count: 100, state: 3 },
@@ -73,25 +120,148 @@ export default {
       typeState: ["正常", "报警", "离线"],
       deviceTypeArr: [1, 2, 3],
       czList: [
-        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 1, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 2, show: true },
-        { companyName: "河北泽宏股份阀门井", state: 3, show: true },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: true,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: false,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: false,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: false,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份阀门井",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
       ],
+      stateType: {
+        1: "正常",
+        2: "报警",
+        3: "离线",
+      },
     };
   },
   computed: {
@@ -107,6 +277,9 @@ export default {
     hide() {
       this.carHide = !this.carHide;
     },
+    change(index) {
+      this.$refs["popo" + index][0].showPopper = false;
+    },
     // 根据父子元素自动计算是否需要添加值start
     changeAddStartNum() {
       const czItem = this.$refs.czItem;
@@ -127,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) {
@@ -175,7 +348,6 @@ $active: #06d7b1 !important;
       top: 50%;
       margin-top: -3px;
     }
-
     &.active {
       color: $active;
     }
@@ -193,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 {
@@ -228,12 +385,12 @@ $active: #06d7b1 !important;
   margin-left: 35px;
 
   &.start {
-    justify-content: flex-start;
+    // justify-content: flex-start;
     & > div {
       // margin-right: 50px;
     }
   }
-  & > div {
+  .com {
     margin-bottom: 20px;
     display: flex;
     justify-content: flex-start;
@@ -241,10 +398,12 @@ $active: #06d7b1 !important;
     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;
@@ -271,8 +430,38 @@ $active: #06d7b1 !important;
     }
   }
 }
+
 .flex {
   display: flex;
-  justify-content: flex-start;
+  // 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>
\ 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";

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

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-28 14:00:10
+ * @LastEditTime: 2022-03-29 11:12:33
  * @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">
+  <div class="chars-card">
     <my-collapse
       title="调压箱"
       ref="myCollapse"
       :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,22 +32,62 @@
             >{{ item.value }}</span
           >
           <span class="number">({{ item.count }})</span>
-        </div>
+        </div> -->
       </template>
       <template #container>
         <div class="container flex">
           <div
             class="com"
-            v-for="item in czList"
+            v-for="(item, index) in czList"
             :key="item.deviceName"
             v-show="item.show"
           >
-            <div :title="item.companyName" class="left zzz">
+            <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>
         </div>
       </template>
@@ -52,21 +96,23 @@
 </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: 100, state: "all" },
         { value: "正常", count: 100, state: 1 },
         { value: "报警", count: 100, state: 2 },
         { value: "离线", count: 100, state: 3 },
@@ -74,25 +120,148 @@ export default {
       typeState: ["正常", "报警", "离线"],
       deviceTypeArr: [1, 2, 3],
       czList: [
-        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 1, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 2, show: true },
-        { companyName: "河北泽宏股份调压箱", state: 3, show: true },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: true,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: false,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: false,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+          popoVidible: false,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 1,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 2,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
+        {
+          companyName: "河北泽宏股份调压箱",
+          state: 3,
+          a: 25,
+          b: 56,
+          c: 54,
+          d: 15,
+          e: 56,
+          image: "",
+          show: true,
+        },
       ],
+      stateType: {
+        1: "正常",
+        2: "报警",
+        3: "离线",
+      },
     };
   },
   computed: {
@@ -108,6 +277,9 @@ export default {
     hide() {
       this.carHide = !this.carHide;
     },
+    change(index) {
+      this.$refs["popo" + index][0].showPopper = false;
+    },
     // 根据父子元素自动计算是否需要添加值start
     changeAddStartNum() {
       const czItem = this.$refs.czItem;
@@ -128,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) {
@@ -176,7 +348,6 @@ $active: #06d7b1 !important;
       top: 50%;
       margin-top: -3px;
     }
-
     &.active {
       color: $active;
     }
@@ -194,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 {
@@ -229,12 +385,12 @@ $active: #06d7b1 !important;
   margin-left: 35px;
 
   &.start {
-    justify-content: flex-start;
+    // justify-content: flex-start;
     & > div {
       // margin-right: 50px;
     }
   }
-  & > div {
+  .com {
     margin-bottom: 20px;
     display: flex;
     justify-content: flex-start;
@@ -242,10 +398,12 @@ $active: #06d7b1 !important;
     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;
@@ -272,8 +430,38 @@ $active: #06d7b1 !important;
     }
   }
 }
+
 .flex {
   display: flex;
-  justify-content: flex-start;
+  // 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>
\ No newline at end of file