增加企业数据监控页面的动画效果，数据缓存

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

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-26 17:14:12
+ * @LastEditTime: 2022-03-28 13:52:40
  * @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
@@ -9,7 +9,11 @@
 
 <template>
   <div class="czcard">
-    <my-collapse title="储罐" ref="myCollapse">
+    <my-collapse
+      title="储罐"
+      ref="myCollapse"
+      :listNum="czList.filter((item) => item.show).length"
+    >
       <template v-slot:chackbox>
         <div
           class="filter"
@@ -34,8 +38,12 @@
             :key="item.deviceName"
             v-show="item.show"
           >
-            <div :title="item.companyName" class="left zzz">{{ item.companyName }}</div>
-            <div :class="`one-${item.state}`" class="state">{{ typeState[item.state - 1] }}</div>
+            <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>
@@ -126,10 +134,6 @@ export default {
         this.deviceTypeArr.push(state);
       }
       this.filter(this.deviceTypeArr);
-      // 改变大小
-      this.$nextTick(() => {
-        this.$refs.myCollapse.getHeight();
-      });
     },
     // 过滤对象
     filter(arr) {
@@ -235,7 +239,7 @@ $active: #06d7b1 !important;
     // margin-right: 45px;
     width: 15%;
     min-width: 190px;
-    margin-right: 1%;
+    margin-right: 1.5%;
     .left {
       margin-right: 4px;
       font-size: 14px;
@@ -257,9 +261,9 @@ $active: #06d7b1 !important;
         border-radius: 2px;
         background-color: #ff6c68;
       }
-      &.one-3{
+      &.one-3 {
         color: #fff;
-        border: 1px solid #AAAAAA;
+        border: 1px solid #aaaaaa;
         border-radius: 2px;
         background-color: #bbbbbb;
       }

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

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-26 17:12:04
+ * @LastEditTime: 2022-03-28 13:43:09
  * @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
@@ -9,7 +9,11 @@
 
 <template>
   <div class="czcard">
-    <my-collapse title="场站" ref="myCollapse">
+    <my-collapse
+      title="场站"
+      ref="myCollapse"
+      :listNum="czList.filter((item) => item.show).length"
+    >
       <template v-slot:chackbox>
         <div class="filter" v-for="item in filterList" :key="item.value">
           <span
@@ -140,7 +144,6 @@ export default {
           show: true,
           type: 4,
         },
-       
       ],
     };
   },
@@ -156,6 +159,7 @@ export default {
   methods: {
     hide() {
       this.carHide = !this.carHide;
+      // this.myCollapse();
     },
     // 根据父子元素自动计算是否需要添加值start
     changeAddStartNum() {
@@ -185,10 +189,15 @@ export default {
         this.deviceTypeArr.push(type);
       }
       this.filter(this.deviceTypeArr);
-      // 改变大小
-      this.$nextTick(() => {
-        this.$refs.myCollapse.getHeight();
-      });
+      // 改变大小,因为动画原因加个延迟
+      // this.$nextTick(() => {
+      //   setTimeout(()=>{
+      //     this.myCollapse()
+      //   }, 300);
+      // });
+    },
+    myCollapse() {
+      // this.$refs.myCollapse.getHeight();
     },
     // 过滤对象
     filter(arr) {
@@ -236,7 +245,7 @@ export default {
   }
   & > div {
     margin-bottom: 20px;
-    margin-left:1%;
+    margin-left: 1%;
     width: 24%;
     min-width: 295px;
   }

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

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-26 17:16:36
+ * @LastEditTime: 2022-03-28 13:52:32
  * @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
@@ -9,7 +9,11 @@
 
 <template>
   <div class="czcard">
-    <my-collapse title="阀门井" ref="myCollapse">
+    <my-collapse
+      title="阀门井"
+      ref="myCollapse"
+      :listNum="czList.filter((item) => item.show).length"
+    >
       <template v-slot:chackbox>
         <div
           class="filter"
@@ -34,8 +38,12 @@
             :key="item.deviceName"
             v-show="item.show"
           >
-            <div :title="item.companyName" class="left zzz">{{ item.companyName }}</div>
-            <div :class="`one-${item.state}`" class="state">{{ typeState[item.state - 1] }}</div>
+            <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>
@@ -126,10 +134,6 @@ export default {
         this.deviceTypeArr.push(state);
       }
       this.filter(this.deviceTypeArr);
-      // 改变大小
-      this.$nextTick(() => {
-        this.$refs.myCollapse.getHeight();
-      });
     },
     // 过滤对象
     filter(arr) {
@@ -235,7 +239,7 @@ $active: #06d7b1 !important;
     // margin-right: 45px;
     width: 15%;
     min-width: 190px;
-    margin-right: 1%;
+    margin-right: 1.5%;
     .left {
       margin-right: 4px;
       font-size: 14px;
@@ -257,9 +261,9 @@ $active: #06d7b1 !important;
         border-radius: 2px;
         background-color: #ff6c68;
       }
-      &.one-3{
+      &.one-3 {
         color: #fff;
-        border: 1px solid #AAAAAA;
+        border: 1px solid #aaaaaa;
         border-radius: 2px;
         background-color: #bbbbbb;
       }

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

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-26 15:33:25
+ * @LastEditTime: 2022-03-28 13:46: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
@@ -16,7 +16,7 @@
     >
       <div class="title flex">
         <div class="left">
-          <div class="device">{{title}}</div>
+          <div class="device">{{ title }}</div>
           <slot name="chackbox" />
         </div>
         <div class="right">
@@ -28,7 +28,11 @@
         </div>
       </div>
       <div ref="container">
-        <slot name="container" />
+        <transition name="fade" mode="out-in">
+          <div :key="listNum">
+            <slot name="container" />
+          </div>
+        </transition>
       </div>
     </div>
   </div>
@@ -38,16 +42,22 @@
 import { mapGetters } from "vuex";
 
 export default {
-  props:{
-    title:String,
+  props: {
+    title: String,
+    // 动画需求
+    listNum: {
+      type: Number,
+      default:"1"
+    },
   },
+
   data() {
     return {
       carHide: true,
       transitionHeight: "60px",
     };
   },
- 
+
   computed: {
     ...mapGetters(["sidebar"]),
   },
@@ -56,6 +66,11 @@ export default {
       setTimeout(this.getHeight, 200);
       // this.getHeight();
     },
+    listNum() {
+      setTimeout(() => {
+        this.getHeight();
+      }, 300);
+    },
   },
   mounted() {
     this.getHeight();
@@ -67,14 +82,14 @@ export default {
     },
     getHeight() {
       const { height } = this.$refs?.container?.getBoundingClientRect();
-      if(!height){
+      if (!height) {
         return;
       }
       // 高度必须是一个指定的值才能过渡变化，这样就计算出了整个元素的指定高度，然后赋值
       if (height > 0) {
         this.transitionHeight = height + 60 + 18 + "px";
-      }else{
-        this.transitionHeight="60px";
+      } else {
+        this.transitionHeight = "60px";
       }
     },
   },
@@ -82,6 +97,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.25s;
+}
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  opacity: 0;
+}
 .card {
   transition: all 0.5s;
   // height: 212px;
@@ -92,7 +114,7 @@ export default {
   box-sizing: border-box;
   padding: 15px 22px 18px 22px;
   overflow: hidden;
-  margin-bottom:20px;
+  margin-bottom: 20px;
   &.hide {
     height: 60px !important;
   }

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

 <!--
  * @Author: your name
  * @Date: 2022-03-25 17:15:31
- * @LastEditTime: 2022-03-26 17:16:52
+ * @LastEditTime: 2022-03-28 13:53:04
  * @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
@@ -9,7 +9,11 @@
 
 <template>
   <div class="czcard">
-    <my-collapse title="调压箱" ref="myCollapse">
+    <my-collapse
+      title="调压箱"
+      ref="myCollapse"
+      :listNum="czList.filter((item) => item.show).length"
+    >
       <template v-slot:chackbox>
         <div
           class="filter"
@@ -34,8 +38,12 @@
             :key="item.deviceName"
             v-show="item.show"
           >
-            <div :title="item.companyName" class="left zzz">{{ item.companyName }}</div>
-            <div :class="`one-${item.state}`" class="state">{{ typeState[item.state - 1] }}</div>
+            <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>
@@ -126,10 +134,6 @@ export default {
         this.deviceTypeArr.push(state);
       }
       this.filter(this.deviceTypeArr);
-      // 改变大小
-      this.$nextTick(() => {
-        this.$refs.myCollapse.getHeight();
-      });
     },
     // 过滤对象
     filter(arr) {
@@ -235,7 +239,7 @@ $active: #06d7b1 !important;
     // margin-right: 45px;
     width: 15%;
     min-width: 190px;
-    margin-right: 1%;
+    margin-right: 1.5%;
     .left {
       margin-right: 4px;
       font-size: 14px;
@@ -257,9 +261,9 @@ $active: #06d7b1 !important;
         border-radius: 2px;
         background-color: #ff6c68;
       }
-      &.one-3{
+      &.one-3 {
         color: #fff;
-        border: 1px solid #AAAAAA;
+        border: 1px solid #aaaaaa;
         border-radius: 2px;
         background-color: #bbbbbb;
       }

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

 <!--
  * @Author: your name
  * @Date: 2022-03-25 13:46:23
- * @LastEditTime: 2022-03-26 17:15:43
+ * @LastEditTime: 2022-03-28 13:50:56
  * @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.vue
@@ -46,6 +46,7 @@ export default {
 
 <style lang="scss" scoped>
 .chars-data {
-  padding: 26px 108px 0 88px;
+  // padding: 26px 108px 0 88px;
+  padding: 20px;
 }
 </style>
\ No newline at end of file

gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue

 <!--
  * @Author: your name
  * @Date: 2022-03-08 17:28:57
- * @LastEditTime: 2022-03-25 15:27:44
+ * @LastEditTime: 2022-03-28 13:54:22
  * @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/index.vue
@@ -16,7 +16,11 @@
         @click="isComChange(index)"
       ></div>
     </div>
-    <component :is="currentTabComponent"></component>
+    <transition name="fade-transform" mode="out-in">
+      <keep-alive>
+        <component :is="currentTabComponent"></component>
+      </keep-alive>
+    </transition>
   </div>
 </template>
 
@@ -28,7 +32,7 @@ export default {
     return {
       // currentTabComponent: tabledata,
       changeIcon: [{ class: "icon-b" }, { class: "icon-a" }],
-      isCom: 1,
+      isCom: 0,
     };
   },
   computed: {