From eb969def191295e1c8c7ea7b1b7dea0262af05bb Mon Sep 17 00:00:00 2001
From: zhaoguoqiang <849348323@qq.com>
Date: Wed, 1 Sep 2021 14:58:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=A0=E4=B8=8AkeepAlive,=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E5=88=B7=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                          |  20 +--
 src/router/index.js                  |   9 +-
 src/views/PerformanceData/index.vue  |  21 ++-
 src/views/cityDistribution/index.vue |  69 ++++---
 src/views/dataOverview/index.vue     |  27 ++-
 src/views/teamList/index.vue         |   2 +-
 src/views/teamPerformance/index.vue  | 257 +++++++++++++++------------
 7 files changed, 240 insertions(+), 165 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index a612a21..d4e84ac 100644
--- a/src/App.vue
+++ b/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>
 
diff --git a/src/router/index.js b/src/router/index.js
index 1fa032a..c3c40c4 100644
--- a/src/router/index.js
+++ b/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
+    }
   },
 ];
 
diff --git a/src/views/PerformanceData/index.vue b/src/views/PerformanceData/index.vue
index c9f592f..52b81e9 100644
--- a/src/views/PerformanceData/index.vue
+++ b/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;
diff --git a/src/views/cityDistribution/index.vue b/src/views/cityDistribution/index.vue
index d705a0e..055b7e3 100644
--- a/src/views/cityDistribution/index.vue
+++ b/src/views/cityDistribution/index.vue
@@ -1,39 +1,47 @@
 <template>
     <div class="cityDistribution">
-        <div class="top">
-            <p class="title">服务商总数量</p>
-            <p class="num">{{poxy_sum | capitalize}}</p>
-        </div>
+        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+            <div class="top">
+                <p class="title">服务商总数量</p>
+                <p class="num">{{poxy_sum | capitalize}}</p>
+            </div>
 
-        <div ref="area" id="area"></div>
-        <div class="info">
-            <div>
-                <p v-for="(item,index) of cityInfo" :key="index"><span>{{item.name}}：</span>{{item.value}}</p>
+            <div ref="area" id="area"></div>
+            <div class="info">
+                <div>
+                    <p v-for="(item,index) of cityInfo" :key="index"><span>{{item.name}}：</span>{{item.value}}</p>
+                </div>
+                <div ref='chartBar' id="home"  v-show="!isLoading"></div>
             </div>
-            <div ref='chartBar' id="home"></div>
-        </div>
-        <div class="ranking">
-            <p class="title">代理城市排名</p>
-            <div class="rankingCity">
-                <div v-for="(item,index) in city" :key="index">
-                    <div class="item">
-                        <div class="city">
-                            <p class="rankNum">{{index+1}}</p>
-                            <p class="cityName">{{item.name}}</p>
+            <div class="ranking">
+                <p class="title">代理城市排名</p>
+                <div class="rankingCity">
+                    <div v-for="(item,index) in city" :key="index">
+                        <div class="item">
+                            <div class="city">
+                                <p class="rankNum">{{index+1}}</p>
+                                <p class="cityName">{{item.name}}</p>
+                            </div>
+                            <p class="number">{{item.num.counts | capitalize}}</p>
                         </div>
-                        <p class="number">{{item.num.counts | capitalize}}</p>
                     </div>
                 </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;
diff --git a/src/views/dataOverview/index.vue b/src/views/dataOverview/index.vue
index 90d2776..0a626f7 100644
--- a/src/views/dataOverview/index.vue
+++ b/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);
diff --git a/src/views/teamList/index.vue b/src/views/teamList/index.vue
index f870445..2ab344f 100644
--- a/src/views/teamList/index.vue
+++ b/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">
diff --git a/src/views/teamPerformance/index.vue b/src/views/teamPerformance/index.vue
index 00732af..2e8be76 100644
--- a/src/views/teamPerformance/index.vue
+++ b/src/views/teamPerformance/index.vue
@@ -1,147 +1,152 @@
 <template>
     <div class="dataOverview">
-        <van-nav-bar title="团队信息" left-text="返回" left-arrow @click-left="onClickLeft" />
-        <div class="top">
-            <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">
-            <p class="title">服务商总数量</p>
-            <p class="num">{{list.level_count | capitalize}}</p>
-            <div class="list">
-                <div class="item" @click="toTeamList('1','5')">
-                    <div class="left">
-                        <img src="../../assets/shareholder.svg" alt="">
-                    </div>
-                    <div class="right">
-                        <p class="name">股东</p>
-                        <p class="num">{{list.level_5}}</p>
-                    </div>
-                </div>
-                <div class="item" @click="toTeamList('1','4')">
-                    <div class="left">
-                        <img src="../../assets/filiale.svg" alt="">
-                    </div>
-                    <div class="right">
-                        <p class="name">分公司</p>
-                        <p class="num">{{list.level_4}}</p>
-                    </div>
-                </div>
-                <div class="item" @click="toTeamList('1','3')">
-                    <div class="left">
-                        <img src="../../assets/partner.svg" alt="">
-                    </div>
-                    <div class="right">
-                        <p class="name">合伙人</p>
-                        <p class="num">{{list.level_3}}</p>
+        <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="money">¥{{list.year_count | capitalize}}</p>
+                <p class="monthMoney">本月业绩：{{list.month_count | capitalize}}</p>
+            </div>
+            <div class="providersSum aa">
+                <p class="title">服务商总数量</p>
+                <p class="num">{{list.level_count | capitalize}}</p>
+                <div class="list">
+                    <div class="item" @click="toTeamList('1','5')">
+                        <div class="left">
+                            <img src="../../assets/shareholder.svg" alt="">
+                        </div>
+                        <div class="right">
+                            <p class="name">股东</p>
+                            <p class="num">{{list.level_5}}</p>
+                        </div>
                     </div>
-                </div>
-                <div class="item" @click="toTeamList('1','2')">
-                    <div class="left">
-                        <img src="../../assets/general.svg" alt="">
+                    <div class="item" @click="toTeamList('1','4')">
+                        <div class="left">
+                            <img src="../../assets/filiale.svg" alt="">
+                        </div>
+                        <div class="right">
+                            <p class="name">分公司</p>
+                            <p class="num">{{list.level_4}}</p>
+                        </div>
                     </div>
-                    <div class="right">
-                        <p class="name">总代</p>
-                        <p class="num">{{list.level_2}}</p>
+                    <div class="item" @click="toTeamList('1','3')">
+                        <div class="left">
+                            <img src="../../assets/partner.svg" alt="">
+                        </div>
+                        <div class="right">
+                            <p class="name">合伙人</p>
+                            <p class="num">{{list.level_3}}</p>
+                        </div>
                     </div>
-                </div>
-                <div class="item" style="margin-bottom:0px" @click="toTeamList('1','1')">
-                    <div class="left">
-                        <img src="../../assets/vip.svg" alt="">
+                    <div class="item" @click="toTeamList('1','2')">
+                        <div class="left">
+                            <img src="../../assets/general.svg" alt="">
+                        </div>
+                        <div class="right">
+                            <p class="name">总代</p>
+                            <p class="num">{{list.level_2}}</p>
+                        </div>
                     </div>
-                    <div class="right">
-                        <p class="name">vip</p>
-                        <p class="num">{{list.level_1}}</p>
+                    <div class="item" style="margin-bottom:0px" @click="toTeamList('1','1')">
+                        <div class="left">
+                            <img src="../../assets/vip.svg" alt="">
+                        </div>
+                        <div class="right">
+                            <p class="name">vip</p>
+                            <p class="num">{{list.level_1}}</p>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="providersSum1 providersSum">
-            <p class="title">本月新增服务商</p>
-            <div class="list">
-                <div class="item" @click="toTeamList('2','5')">
-                    <div class="left">
-                        <img src="../../assets/shareholder.svg" alt="">
-                    </div>
-                    <div class="right">
-                        <p class="name">股东</p>
-                        <p class="num">{{list.month_add_level_5}}</p>
-                    </div>
-                </div>
-                <div class="item" @click="toTeamList('2','4')">
-                    <div class="left">
-                        <img src="../../assets/filiale.svg" alt="">
-                    </div>
-                    <div class="right">
-                        <p class="name">分公司</p>
-                        <p class="num">{{list.month_add_level_4}}</p>
-                    </div>
-                </div>
-                <div class="item" @click="toTeamList('2','3')">
-                    <div class="left">
-                        <img src="../../assets/partner.svg" alt="">
+            <div class="providersSum1 providersSum">
+                <p class="title">本月新增服务商</p>
+                <div class="list">
+                    <div class="item" @click="toTeamList('2','5')">
+                        <div class="left">
+                            <img src="../../assets/shareholder.svg" alt="">
+                        </div>
+                        <div class="right">
+                            <p class="name">股东</p>
+                            <p class="num">{{list.month_add_level_5}}</p>
+                        </div>
                     </div>
-                    <div class="right">
-                        <p class="name">合伙人</p>
-                        <p class="num">{{list.month_add_level_3}}</p>
+                    <div class="item" @click="toTeamList('2','4')">
+                        <div class="left">
+                            <img src="../../assets/filiale.svg" alt="">
+                        </div>
+                        <div class="right">
+                            <p class="name">分公司</p>
+                            <p class="num">{{list.month_add_level_4}}</p>
+                        </div>
                     </div>
-                </div>
-                <div class="item" @click="toTeamList('2','2')">
-                    <div class="left">
-                        <img src="../../assets/general.svg" alt="">
-                    </div>
-                    <div class="right">
-                        <p class="name">总代</p>
-                        <p class="num">{{list.month_add_level_2}}</p>
+                    <div class="item" @click="toTeamList('2','3')">
+                        <div class="left">
+                            <img src="../../assets/partner.svg" alt="">
+                        </div>
+                        <div class="right">
+                            <p class="name">合伙人</p>
+                            <p class="num">{{list.month_add_level_3}}</p>
+                        </div>
                     </div>
-                </div>
-                <div class="item" style="margin-bottom:0px" @click="toTeamList('2','1')">
-                    <div class="left">
-                        <img src="../../assets/vip.svg" alt="">
+                    <div class="item" @click="toTeamList('2','2')">
+                        <div class="left">
+                            <img src="../../assets/general.svg" alt="">
+                        </div>
+                        <div class="right">
+                            <p class="name">总代</p>
+                            <p class="num">{{list.month_add_level_2}}</p>
+                        </div>
                     </div>
-                    <div class="right">
-                        <p class="name">vip</p>
-                        <p class="num">{{list.month_add_level_1}}</p>
+                    <div class="item" style="margin-bottom:0px" @click="toTeamList('2','1')">
+                        <div class="left">
+                            <img src="../../assets/vip.svg" alt="">
+                        </div>
+                        <div class="right">
+                            <p class="name">vip</p>
+                            <p class="num">{{list.month_add_level_1}}</p>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-
-        <div class="moneyRanking">
-            <div class="title">本月团队业绩排名TOP</div>
-            <div class="list">
-                <div class="item" v-for="(item,index) of list.month_money_top" :key="index">
-                    <div class="rankNum">
-                        <p>{{index+1}}</p>
-                    </div>
-                    <div class="teamImg">
-                        <img :src="item.headimg" alt="">
-                    </div>
-                    <div class="teamInfo">
-                        <div class="teamName">{{item.username}}</div>
-                        <div class="teamMoney">{{list.today_month}}月打款业绩：{{item.team_integral | capitalize}}</div>
-                        <div class="teamNum">注册时间：{{item.created_at | time}}</div>
+
+            <div class="moneyRanking">
+                <div class="title">本月团队业绩排名TOP</div>
+                <div class="list">
+                    <div class="item" v-for="(item,index) of list.month_money_top" :key="index">
+                        <div class="rankNum">
+                            <p>{{index+1}}</p>
+                        </div>
+                        <div class="teamImg">
+                            <img :src="item.headimg" alt="">
+                        </div>
+                        <div class="teamInfo">
+                            <div class="teamName">{{item.username}}</div>
+                            <div class="teamMoney">{{list.today_month}}月打款业绩：{{item.team_integral | capitalize}}</div>
+                            <div class="teamNum">注册时间：{{item.created_at | time}}</div>
+                        </div>
                     </div>
                 </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)
             },
@@ -184,22 +193,27 @@
 <style lang="scss" scoped>
     .dataOverview {
         background: #3C3F50;
-        
-        ::v-deep .van-nav-bar__content{
-            background: RGBA(63, 66, 88, 1); 
+
+        ::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;