feat: 添加动画

public/index.html

@@ -13,6 +13,7 @@
     <script src="//cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
     <script src="//cdn.jsdelivr.net/npm/echarts-liquidfill@3.1.0/dist/echarts-liquidfill.min.js"></script>
     <script src="//cdn.staticfile.org/axios/0.19.0/axios.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>

src/components/bgBox/index.vue

@@ -50,7 +50,7 @@
       </div>
     </div>
     <div class="box">
-      <slot>内容区</slot>
+      <slot>&nbsp;</slot>
     </div>
     <div :class="[`bg`, bgType]"></div>
   </div>

src/util/index.js

@@ -21,20 +21,35 @@ function isType(data, type = undefined) {
     }
   ]
 **/
-function autoVueFn(autoList = [], vm) {
-  vm._timer = []
-  autoList.forEach((item) => {
-    const fn = () => {
-      item.fn.call(vm)
+function autoVueFn(autoList = [], opt) {
+  if (!opt) {
+    opt = {
+      vm: this,
+    }
+  } else if (opt.$attrs) {
+    opt = {
+      vm: opt,
+    }
+  }
+  const { vm, batEnd } = opt
+  let end = 0
+  vm.timer_ = []
+  autoList.forEach(async (item) => {
+    const fn = async () => {
+      await item.fn.call(vm)
+      end = end + 1
+      if (end >= autoList.length) {
+        batEnd && batEnd.call(vm)
+      }
     }
     fn()
     const timer = setInterval(fn, item.time)
-    vm._timer.push(timer)
+    vm.timer_.push(timer)
   })
   vm.$options.beforeDestroy = [
     ...(vm.$options.beforeDestroy || []),
     function () {
-      vm._timer.forEach((item) => {
+      vm.timer_.forEach((item) => {
         console.log(`卸载`, item)
         clearInterval(item)
       })

src/views/page1/index.vue

@@ -4,10 +4,12 @@
       style="position: absolute; top: 115px; left: 50px"
       title="实时统计"
       :data="statisticsData"
+      class="animated fadeInLeft"
       v-if="isCake"
     />
     <cylindricalHistogram
       style="position: absolute; left: 50px; top: 430px"
+      class="animated fadeInLeft"
       v-if="isGetData"
       :unit="`公斤/产量`"
       title="各区域移栽产量分析"
@@ -17,6 +19,7 @@
     <weatherForecast
       :unit="`摄氏度`"
       style="position: absolute; left: 50px; top: 760px"
+      class="animated fadeInLeft"
       v-if="isWeather"
       title="天气预报"
       :area="Weatherarea"
@@ -27,6 +30,7 @@
       :unit="`平方米/面积`"
       id="`wavyLineChart`"
       style="position: absolute; right: 50px; top: 115px"
+      class="animated fadeInRight"
       v-if="isWavyLine"
       title="各区域移栽面积"
       :area.sync="wavyLineArea"
@@ -35,6 +39,7 @@
     />
     <HorizontalHistogram
       style="position: absolute; right: 50px; top: 430px"
+      class="animated fadeInRight"
       v-if="isHorizontal"
       id="`移栽情况分析`"
       title="移栽情况分析"
@@ -44,6 +49,7 @@
     <wavyLineChart
       id="`移栽趋势分析`"
       style="position: absolute; right: 50px; top: 760px"
+      class="animated fadeInRight"
       v-if="isWavyLine"
       title="移栽趋势分析"
       :area.sync="trendarea"
@@ -85,6 +91,7 @@ export default {
   },
   data() {
     return {
+      autoVueFnInit: false,
       statisticsData: {
         title: `目标完成率`,
         value: 0,
@@ -155,14 +162,17 @@ export default {
           fn: this.getTrendAnalysis,
         },
       ],
-      this
+      {
+        vm: this,
+        batEnd() {
+          this.autoVueFnInit = true
+        },
+      }
     )
     this.getJSON()
     // this.$http.get(`https://httpbin.org/get`)
   },
-  mounted() {
-    screenSize(this.$refs.editor)
-  },
+  mounted() {},
   methods: {
     tabChange(val) {
       if (val === 0) {
@@ -173,7 +183,7 @@ export default {
       console.log(`val`, val)
     },
     getAnalysisOfTransplantYieldInVariousRegions() {
-      this.$http
+      return this.$http
         .get(`/api/analysisOfTransplantYieldInVariousRegions`)
         .then((res) => {
           const area = []
@@ -188,7 +198,7 @@ export default {
         })
     },
     getWeatherForecast() {
-      this.$http.get(`/api/weatherForecast`).then((res) => {
+      return this.$http.get(`/api/weatherForecast`).then((res) => {
         const area = []
         const dataArray = []
         res.forEach((element) => {
@@ -201,7 +211,7 @@ export default {
       })
     },
     getTransplantAreaInEachRegion() {
-      this.$http.get(`/api/transplantAreaInEachRegion`).then((res) => {
+      return this.$http.get(`/api/transplantAreaInEachRegion`).then((res) => {
         const area = []
         const dataArray = {
           LastYear: [],
@@ -218,26 +228,28 @@ export default {
       })
     },
     getAnalysisOfTransplantingSituation() {
-      this.$http.get(`/api/analysisOfTransplantingSituation`).then((res) => {
-        const area = []
-        const dataArray = {
-          Done: [],
-          Percentage: [],
-        }
-        const date = res.sort((a, b) => b.已移载 - a.已移载)
-        date.forEach((element) => {
-          area.push(element.名称.slice(0, 2))
-          dataArray.Done.push(element.已移载)
-          dataArray.Percentage.push(element.比率.toFixed(0))
-        })
-        this.HorizontalArea = area
-        this.HorizontalArray = dataArray
+      return this.$http
+        .get(`/api/analysisOfTransplantingSituation`)
+        .then((res) => {
+          const area = []
+          const dataArray = {
+            Done: [],
+            Percentage: [],
+          }
+          const date = res.sort((a, b) => b.已移载 - a.已移载)
+          date.forEach((element) => {
+            area.push(element.名称.slice(0, 2))
+            dataArray.Done.push(element.已移载)
+            dataArray.Percentage.push(element.比率.toFixed(0))
+          })
+          this.HorizontalArea = area
+          this.HorizontalArray = dataArray
 
-        this.isHorizontal = true
-      })
+          this.isHorizontal = true
+        })
     },
     getStatistics() {
-      this.$http.get(`/api/realTimeStatistics`).then((res) => {
+      return this.$http.get(`/api/realTimeStatistics`).then((res) => {
         const obj = this.statisticsData
         // eslint-disable-next-line no-prototype-builtins
         if (res.hasOwnProperty(obj.title)) {
@@ -263,7 +275,7 @@ export default {
       })
     },
     getTrendAnalysis() {
-      this.$http.get(`/api/transplantTrendAnalysis`).then((res) => {
+      return this.$http.get(`/api/transplantTrendAnalysis`).then((res) => {
         const area = []
         const dataArray = {
           LastYear: [],

src/views/page2/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <bgBox class="bgBox" bgType="g-bg2" :tabChange="tabChange" :tabIndex="1">
-      <leftBox class="lefBox" />
+      <leftBox class="lefBox animated fadeInLeft" />
       <cmap />
     </bgBox>
   </div>

src/views/page2/item.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="list">
-    <div class="containerBox" v-for="(item, index) in list" :key="index">
+    <div
+      class="containerBox animated fadeInDown"
+      v-for="(item, index) in list"
+      :key="index"
+    >
       <div class="left">
         <p class="title">{{ item.名称 }}</p>
         <p>种植数量：{{ item.已种植 }}</p>

src/views/page2/leftBox.vue

@@ -54,7 +54,10 @@ export default {
           名称_like: this.leftBox.input || undefined,
         },
       })
-      this.leftBox.list = data
+      this.leftBox.list = []
+      this.$nextTick(() => {
+        this.leftBox.list = data
+      })
     },
     clearFn() {
       this.leftBox.input = ``