加上keepAlive,下拉刷新

src/App.vue

@@ -1,8 +1,9 @@
 <template>
   <div id="app">
-    <keep-alive  include="beiHuo,tiHuo">
-    <router-view v-if="isRouterAlive"></router-view>
+    <keep-alive>
+    <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive >
+    <router-view v-if="!$route.meta.keepAlive"></router-view>
   </div>
 </template>
 
@@ -10,24 +11,11 @@
 
 export default {
   name:'APP',
-  provide(){  //父组件中通过provide来提供变量，在子组件中通过inject来注入变量。          
-    return{
-      reload:this.reload
-    }
-  },
   data(){
     return{
-      isRouterAlive:true
+      
     }
   },
-  methods: {
-            reload () {
-                this.isRouterAlive = false;            //先关闭，
-                this.$nextTick(function () {
-                    this.isRouterAlive = true;         //再打开
-                }) 
-            }
-        }
 };
 </script>
 

src/router/index.js

@@ -31,6 +31,9 @@ const routes = [{
     path: "/home",
     name: 'home',
     component: () => import('../views/Home/index.vue'),
+    meta: {
+      keepAlive: true
+    }
   },
   {
     path: "/cityDistribution",
@@ -51,14 +54,14 @@ const routes = [{
     path: "/teamList",
     name: 'teamList',
     component: () => import('../views/teamList/index.vue'),
-    meta: {
-      // title: '列表'
-    }
   },
   {
     path: "/teamPerformance",
     name: 'teamPerformance',
     component: () => import('../views/teamPerformance/index.vue'),
+    meta: {
+      keepAlive: true
+    }
   },
 ];
 

src/views/PerformanceData/index.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="PerformanceData">
+        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
         <div class="dataInfo">
-            <p class="title">2021年总业绩</p>
+            <p class="title">轻未来2021年总业绩</p>
             <p class="money" v-if="year_count_order_money">¥{{year_count_order_money | capitalize}}</p>
         </div>
         <!-- <div class="time">
@@ -16,18 +17,26 @@
 
             <div class="bar" ref="bar"></div>
         </div>
+        </van-pull-refresh>
     </div>
 </template>
 <script>
     import * as echarts from 'echarts';
     import data from "@/api/data.js";
+    import {
+        PullRefresh
+    } from 'vant';
     export default {
+        components: {
+            'van-pull-refresh': PullRefresh
+        },
         data() {
             return {
                 opinionData: [],
                 year_count_order_money: '',
                 money_count_order_money: '',
                 order_goods_num: '',
+                isLoading: false,
             }
         },
 
@@ -42,6 +51,12 @@
             }
         },
         methods: {
+            async  onRefresh() {
+                 await this.getData()
+            this.drawLine(this.opinionData)
+            this.barData(this.opinionData)
+                this.isLoading = false;
+            },
             async getData() {
                 this.opinionData = []
                 let month = new Date().getMonth() + 1;
@@ -179,6 +194,9 @@
             box-shadow: 0px 17px 35px 0px rgba(58, 61, 80, 0.2);
             border-radius: 0px 0px 20px 20px;
             margin-bottom: 52px;
+            position: fixed;
+            // top: 85px;
+            z-index: 999;
 
             .title {
                 font-size: 40px;
@@ -229,6 +247,7 @@
             background: linear-gradient(0deg, #4D5169, #272A3B);
             border-radius: 20px;
             padding: 50px 70px;
+        padding-top: 41.67vw;
 
             .title {
                 font-size: 40px;

src/views/cityDistribution/index.vue

@@ -1,5 +1,6 @@
 <template>
     <div class="cityDistribution">
+        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
             <div class="top">
                 <p class="title">服务商总数量</p>
                 <p class="num">{{poxy_sum | capitalize}}</p>
@@ -10,7 +11,7 @@
                 <div>
                     <p v-for="(item,index) of cityInfo" :key="index"><span>{{item.name}}：</span>{{item.value}}</p>
                 </div>
-            <div ref='chartBar' id="home"></div>
+                <div ref='chartBar' id="home"  v-show="!isLoading"></div>
             </div>
             <div class="ranking">
                 <p class="title">代理城市排名</p>
@@ -26,14 +27,21 @@
                     </div>
                 </div>
             </div>
+        </van-pull-refresh>
     </div>
 </template>
 <script>
     import * as echarts from 'echarts';
+    import {
+        PullRefresh
+    } from 'vant';
     import '../../utils/china'
     import data from "@/api/data.js";
     export default {
         name: 'cityDistribution',
+        components: {
+            'van-pull-refresh': PullRefresh
+        },
         data() {
             return {
                 poxy_sum: '',
@@ -41,6 +49,7 @@
                 cityName: '广东',
                 cityInfo: [],
                 chartBar: null,
+                isLoading: false,
             }
         },
         filters: {
@@ -54,6 +63,14 @@
             this.statistical(this.cityInfo)
         },
         methods: {
+            async onRefresh() {
+                this.cityInfo = [];
+                this.chartBar = null;
+                await this.getData()
+                await this.drawarea();
+                await this.statistical(this.cityInfo)
+                this.isLoading = false;
+            },
             async getData() {
                 const res = await data.dataDistribution();
                 this.poxy_sum = res.data.poxy_sum
@@ -214,6 +231,7 @@
         min-height: 100vh;
         background: #3C3F50;
 
+
         .top {
             height: 258px;
             background: linear-gradient(90deg, #729EFF, #5D48E1);
@@ -221,6 +239,10 @@
             border-radius: 0px 0px 20px 20px;
             padding: 0 68px;
             padding-top: 50px;
+            position: fixed;
+            // top: 85px;
+            z-index: 999;
+            width: 100%;
 
             .title {
                 font-size: 40px;
@@ -243,7 +265,8 @@
         }
 
         #area {
-            height: 400px;
+            padding-top: 34.2vw;
+            height: 89.33vw;
             width: 750px;
         }
 
@@ -251,7 +274,7 @@
             width: 690px;
             height: 364px;
             // margin: 0 auto;
-            // margin-top: 60px;
+            margin-top: 60px;
             left: 50%;
             transform: translateX(-50%);
         }
@@ -259,7 +282,7 @@
         .info {
             margin: 0 auto;
             width: 690px;
-            height: 724px;
+            height: 105.53vw;
             background: linear-gradient(0deg, #729EFF, #5D48E1);
             border-radius: 20px;
             padding: 46px 24px;

src/views/dataOverview/index.vue

@@ -1,11 +1,12 @@
 <template>
     <div class="dataOverview">
+        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
         <div class="top">
-            <p class="title">2021年总业绩</p>
+            <p class="title">轻未来2021年总业绩</p>
             <p class="money">¥{{list.year_count | capitalize}}</p>
             <p class="monthMoney">本月业绩：{{list.month_count | capitalize}}</p>
         </div>
-        <div class="providersSum">
+        <div class="providersSum aa">
             <p class="title">服务商总数量</p>
             <p class="num">{{list.level_count | capitalize}}</p>
             <div class="list">
@@ -125,15 +126,23 @@
                 </div>
             </div>
         </div>
+        </van-pull-refresh>
     </div>
 </template>
 <script>
     import data from "@/api/data.js";
+    import {
+        PullRefresh
+    } from 'vant';
     export default {
         name: "dataOverview",
+        components: {
+            'van-pull-refresh': PullRefresh
+        },
         data() {
             return {
                 list: {},
+                isLoading: false,
             }
         },
         filters: {
@@ -145,6 +154,10 @@
             this.getData()
         },
         methods: {
+             onRefresh() {
+                 this.getData()
+                this.isLoading = false;
+            },
             async getData() {
                 const res = await data.overview();
                 this.list = res.data
@@ -173,8 +186,10 @@
 <style lang="scss" scoped>
     .dataOverview {
         background: #3C3F50;
+        // padding-top: 334px;
 
         .top {
+            z-index: 999;
             width: 750px;
             height: 334px;
             background: linear-gradient(90deg, #729EFF, #5D48E1);
@@ -183,6 +198,8 @@
             padding: 0 70px;
             padding-top: 46px;
             margin-bottom: 50px;
+            position: fixed;
+            // top: 85px;
 
             .title {
                 height: 40px;
@@ -218,8 +235,12 @@
                 display: inline-block;
             }
         }
-
+ .aa {
+            padding-top: 53.53vw !important;
+        }
         .providersSum {
+            
+        padding-top: 334px;
             padding: 50px 70px;
             min-height: 580px;
             background: RGBA(63, 66, 88, 1);

src/views/teamList/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="teamList">
-        <van-nav-bar title="列表" left-text="返回" left-arrow @click-left="onClickLeft" />
+        <van-nav-bar title="列表" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true" />
         <div v-if="list.data.length>0" class="moneyRanking">
             <p class="title">{{this.$route.query.level_id | capitalize2}}</p>
             <div class="list">

src/views/teamPerformance/index.vue

@@ -1,12 +1,13 @@
 <template>
     <div class="dataOverview">
-        <van-nav-bar title="团队信息" left-text="返回" left-arrow @click-left="onClickLeft" />
+        <van-nav-bar title="团队信息" left-text="返回" left-arrow @click-left="onClickLeft" :fixed="true" />
+        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
             <div class="top">
-            <p class="title">2021年总业绩</p>
+                <p class="title">轻未来2021年总业绩</p>
                 <p class="money">¥{{list.year_count | capitalize}}</p>
                 <p class="monthMoney">本月业绩：{{list.month_count | capitalize}}</p>
             </div>
-        <div class="providersSum">
+            <div class="providersSum aa">
                 <p class="title">服务商总数量</p>
                 <p class="num">{{list.level_count | capitalize}}</p>
                 <div class="list">
@@ -126,22 +127,26 @@
                     </div>
                 </div>
             </div>
+        </van-pull-refresh>
     </div>
 </template>
 <script>
     import data from "@/api/data.js";
     import {
-        NavBar
+        NavBar,
+        PullRefresh
     } from 'vant';
     export default {
         name: "dataOverview",
         components: {
-            "van-nav-bar": NavBar
+            "van-nav-bar": NavBar,
+            'van-pull-refresh': PullRefresh
         },
         data() {
             return {
                 list: {},
                 id: '',
+                isLoading: false,
             }
         },
         filters: {
@@ -158,6 +163,10 @@
             this.getData()
         },
         methods: {
+            onRefresh() {
+                this.getData()
+                this.isLoading = false;
+            },
             onClickLeft() {
                 this.$router.go(-1)
             },
@@ -185,21 +194,26 @@
     .dataOverview {
         background: #3C3F50;
 
-        ::v-deep .van-nav-bar__content{
+        ::v-deep .van-nav-bar__content {
             background: RGBA(63, 66, 88, 1);
         }
-        ::v-deep .van-nav-bar__title{
+
+        ::v-deep .van-nav-bar__title {
             color: #fff;
         }
-        ::v-deep .van-nav-bar__text{
+
+        ::v-deep .van-nav-bar__text {
             color: #fff;
         }
-        ::v-deep .van-icon-arrow-left::before{
+
+        ::v-deep .van-icon-arrow-left::before {
             color: #fff;
         }
-        ::v-deep .van-hairline--bottom::after{
+
+        ::v-deep .van-hairline--bottom::after {
             border: none;
         }
+
         .top {
             width: 750px;
             height: 334px;
@@ -209,6 +223,9 @@
             padding: 0 70px;
             padding-top: 46px;
             margin-bottom: 50px;
+            position: fixed;
+            top: 85px;
+            z-index: 999;
 
             .title {
                 height: 40px;
@@ -245,6 +262,10 @@
             }
         }
 
+        .aa {
+            padding-top: 58.53vw !important;
+        }
+
         .providersSum {
             padding: 50px 70px;
             min-height: 580px;