动画

src/views/dataScreen1/components/bottomCenter/ds1bc2.vue

@@ -2,27 +2,29 @@
   <div class="Ds1bc2">
     <div class="tip">数据根据当天&当月累计分析</div>
     <div class="box">
-      <div class="title">电子税务局办理业务数据分析</div>
+      <div v-if="datas.length > 0" class="title" :key="'T' + Index">
+        {{ datas[Index].title }}
+      </div>
       <div class="datas">
         <div class="left">
-          <div class="charts-box">
-            <div class="charts">
+          <div v-if="datas.length > 0" class="charts-box" :key="'IL' + Index">
+            <div class="charts" v-if="datas.length > 0">
               <div class="chart-bg chart-bg-left"></div>
               <div class="chart-tip">
                 <div class="chart-tip1">当天业务数据分析</div>
               </div>
               <div class="chart">
                 <dv-active-ring-chart
-                  :config="dayDatas"
+                  :config="datas[Index].dayDatas"
                   style="width: 100%; height: 100%"
                 />
               </div>
             </div>
             <div class="infos">
-              <div class="info-list" v-if="dayDatas.data">
+              <div class="info-list" v-if="datas.length > 0">
                 <div
                   class="text"
-                  v-for="(item, index) in dayDatas.data"
+                  v-for="(item, index) in datas[Index].dayDatas.data"
                   :key="index"
                 >
                   {{
@@ -36,24 +38,24 @@
           </div>
         </div>
         <div class="right">
-          <div class="charts-box">
-            <div class="charts">
+          <div v-if="datas.length > 0" class="charts-box" :key="'IR' + Index">
+            <div class="charts" v-if="datas.length > 0">
               <div class="chart-bg chart-bg-right"></div>
               <div class="chart-tip">
                 <div class="chart-tip1">当月业务数据分析</div>
               </div>
               <div class="chart">
                 <dv-active-ring-chart
-                  :config="monthDatas"
+                  :config="datas[Index].monthDatas"
                   style="width: 100%; height: 100%"
                 />
               </div>
             </div>
             <div class="infos">
-              <div class="info-list" v-if="monthDatas.data">
+              <div class="info-list" v-if="datas.length > 0">
                 <div
                   class="text"
-                  v-for="(item, index) in monthDatas.data"
+                  v-for="(item, index) in datas[Index].monthDatas.data"
                   :key="index"
                 >
                   {{
@@ -77,6 +79,8 @@ export default {
 
   data() {
     return {
+      loopTimer: 0,
+      Index: 0,
       config: {
         radius: "40%",
         activeRadius: "40%",
@@ -88,8 +92,7 @@ export default {
           fontSize: 0,
         },
       },
-      dayDatas: {},
-      monthDatas: {},
+      datas: [],
     };
   },
 
@@ -101,54 +104,92 @@ export default {
 
   methods: {
     getDatas() {
-      let day = [
-        {
-          name: "发票业务",
-          value: 120,
-        },
-        {
-          name: "文书业务",
-          value: 78,
-        },
-        {
-          name: "申报业务",
-          value: 66,
-        },
-        {
-          name: "其他业务",
-          value: 80,
-        },
-      ];
-      let month = [
-        {
-          name: "发票业务",
-          value: 1200,
-        },
-        {
-          name: "文书业务",
-          value: 780,
-        },
-        {
-          name: "申报业务",
-          value: 660,
-        },
-        {
-          name: "其他业务",
-          value: 800,
-        },
-      ];
-      this.updateDatas(day, month);
+      let datas = [];
+      for (let i = 0; i < 4; i++) {
+        let title;
+        switch (i) {
+          case 0:
+            title = "自助机办理业务数据分析";
+            break;
+          case 1:
+            title = "排队叫号办理业务数据分析";
+            break;
+          case 2:
+            title = "电子税务局办理业务数据分析";
+            break;
+          case 3:
+            title = "智能设备办理业务数据分析";
+            break;
+        }
+        let day = [
+          {
+            name: "发票业务",
+            value: Math.round(Math.random() * 1000),
+          },
+          {
+            name: "文书业务",
+            value: Math.round(Math.random() * 1000),
+          },
+          {
+            name: "申报业务",
+            value: Math.round(Math.random() * 1000),
+          },
+          {
+            name: "其他业务",
+            value: Math.round(Math.random() * 1000),
+          },
+        ];
+        let month = [
+          {
+            name: "发票业务",
+            value: Math.round(Math.random() * 1000),
+          },
+          {
+            name: "文书业务",
+            value: Math.round(Math.random() * 1000),
+          },
+          {
+            name: "申报业务",
+            value: Math.round(Math.random() * 1000),
+          },
+          {
+            name: "其他业务",
+            value: Math.round(Math.random() * 1000),
+          },
+        ];
+        let data = {
+          title: title,
+          dayDatas: this.updateDatas(day),
+          monthDatas: this.updateDatas(month),
+        };
+        datas.push(data);
+      }
+      this.loopDatas();
+      this.datas = datas;
     },
-    updateDatas(day, month) {
+
+    updateDatas(data) {
       let config = this.config;
-      let dayDatas = Object.assign({}, config);
-      let monthDatas = Object.assign({}, config);
-      dayDatas.data = day;
-      monthDatas.data = month;
-      this.dayDatas = { ...dayDatas };
-      this.monthDatas = { ...monthDatas };
+      let newConfig = Object.assign({}, config);
+      newConfig.data = data;
+      return newConfig;
+    },
+
+    loopDatas() {
+      clearTimeout(this.loopTimer);
+      this.loopTimer = setTimeout(() => {
+        if (this.Index < this.datas.length - 1) {
+          this.Index += 1;
+        } else {
+          this.Index = 0;
+        }
+        this.loopDatas();
+      }, 10 * 1000);
     },
   },
+  beforeDestroy() {
+    clearTimeout(this.loopTimer);
+  },
 };
 </script>
 
@@ -189,6 +230,20 @@ export default {
       font-size: 30px;
       color: #ffffff;
       box-sizing: border-box;
+      animation: 1s title;
+    }
+
+    @keyframes title {
+      0% {
+        opacity: 0;
+        scale: 0;
+        translate: -35% 0;
+      }
+      100% {
+        opacity: 1;
+        scale: 1;
+        translate: 0% 0%;
+      }
     }
 
     .datas {
@@ -212,6 +267,7 @@ export default {
           height: 100%;
           display: flex;
           flex-direction: column;
+          animation: 1.5s infoAin;
 
           .charts {
             padding: 30px;
@@ -342,14 +398,29 @@ export default {
             }
           }
         }
+
+        @keyframes infoAin {
+          0% {
+            opacity: 0;
+            scale: 0;
+            translate: var(--bc2Ani) 0%;
+          }
+          100% {
+            opacity: 1;
+            scale: 1;
+            translate: 0% 0%;
+          }
+        }
       }
       .left {
         margin-left: 40px;
         --rotate: rotate(-360deg);
+        --bc2Ani: 90%;
       }
       .right {
         margin-right: 40px;
         --rotate: rotate(360deg);
+        --bc2Ani: -90%;
       }
     }
   }

src/views/dataScreen1/components/bottomLeft/ds1bl1.vue

@@ -21,8 +21,10 @@
               </div>
             </div>
             <div class="right">
-              <div class="title">{{ datas[Index].name }}</div>
-              <div class="content" :key="Index">
+              <div class="title" :key="'T' + Index">
+                {{ datas[Index].name }}
+              </div>
+              <div class="content" :key="'C' + Index">
                 <marquee class="marquee" scrollamount="3" direction="up">
                   <div
                     class="list"
@@ -356,6 +358,20 @@ export default {
             font-size: 15px;
             color: #ffffff;
             background: transparent;
+            animation: 1s title;
+          }
+
+          @keyframes title {
+            0% {
+              opacity: 0;
+              scale: 0;
+              translate: -35% 0;
+            }
+            100% {
+              opacity: 1;
+              scale: 1;
+              translate: 0% 0%;
+            }
           }
 
           .content {

src/views/dataScreen1/components/bottomLeft/ds1bl2.vue

@@ -7,28 +7,33 @@
       </div>
       <div class="datas">
         <div class="infos">
-          <div class="controls">
-            <div class="left">
-              <div
-                class="week"
-                :style="type == 'week' ? 'color:#ffffff' : 'color:#25A4FF'"
-                @click="chage('week')"
-              >
-                近一周
+          <transition name="active">
+            <div
+              v-if="datas.week.length > 0 || datas.year.length > 0"
+              class="controls"
+            >
+              <div class="left">
+                <div
+                  class="week"
+                  :style="type == 'week' ? 'color:#ffffff' : 'color:#25A4FF'"
+                  @click="chage('week')"
+                >
+                  近一周
+                </div>
+                <div
+                  class="year"
+                  :style="type == 'year' ? 'color:#ffffff' : 'color:#25A4FF'"
+                  @click="chage('year')"
+                >
+                  近半年
+                </div>
               </div>
-              <div
-                class="year"
-                :style="type == 'year' ? 'color:#ffffff' : 'color:#25A4FF'"
-                @click="chage('year')"
-              >
-                近半年
+              <div class="right">
+                <div class="tip1">注销管户</div>
+                <div class="tip2">新增管户</div>
               </div>
             </div>
-            <div class="right">
-              <div class="tip1">注销管户</div>
-              <div class="tip2">新增管户</div>
-            </div>
-          </div>
+          </transition>
           <div class="chart">
             <transition-group class="active" name="active" tag="div">
               <div
@@ -262,6 +267,17 @@ export default {
         height: 100%;
         box-sizing: border-box;
 
+        .active-enter-active,
+        .active-leave-active {
+          transition: all 0.5s;
+        }
+
+        .active-enter,
+        .active-leave-to {
+          opacity: 0;
+          transform: scale(0);
+        }
+
         .controls {
           width: 100%;
           height: 28px;
@@ -339,17 +355,6 @@ export default {
           width: 100%;
           height: calc(100% - 38px);
 
-          .active-enter-active,
-          .active-leave-active {
-            transition: all 0.5s;
-          }
-
-          .active-enter,
-          .active-leave-to {
-            opacity: 0;
-            transform: scale(0);
-          }
-
           .active {
             width: 100%;
             height: 100%;

src/views/dataScreen1/components/bottomRight/ds1br3.vue

@@ -209,7 +209,7 @@ export default {
         seriesIndex: 0,
         dataIndex: currentIndex,
       });
-      this.showTipTimer = setInterval(() => {
+      this.showTipTimer = setTimeout(() => {
         this.loopShowTip();
       }, 1000 * 5);
     },