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

f4da6662 · 纪泽龙 · 352522ad · f4da6662 · f4da6662 · f4da6662
Commit f4da6662 authored Mar 28, 2022 by 纪泽龙
8 changed files
--- a/gassafetyprogress-web/src/utils/mapClass/mapbigwindow.js
+++ b/gassafetyprogress-web/src/utils/mapClass/mapbigwindow.js
--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Cg.vue
+++ b/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;
      }

--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/CzCard.vue
+++ b/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;
  }

--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Fmj.vue
+++ b/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;
      }

--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/MyCollapse.vue
+++ b/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,8 +28,12 @@
        </div>
      </div>
      <div ref="container">
+        <transition name="fade" mode="out-in">
+          <div :key="listNum">
            <slot name="container" />
          </div>
+        </transition>
+      </div>
    </div>
  </div>
 </template>
@@ -38,9 +42,15 @@
 import { mapGetters } from "vuex";

 export default {
-  props:{
-    title:String,
+  props: {
+    title: String,
+    // 动画需求
+    listNum: {
+      type: Number,
+      default:"1"
+    },
  },
+
  data() {
    return {
      carHide: true,
@@ -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;
  }

--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/Tyx.vue
+++ b/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;
      }

--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/component/charsData/index.vue
+++ b/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
--- a/gassafetyprogress-web/src/views/operationMonitor/monitorData/index.vue
+++ b/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>
+    <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: {