表格头部悬浮调整， 定制化表格数据使用缓存

src/jfw/modules/app/src/web/templates/big-member/page_report_table.html

@@ -25,16 +25,22 @@
         width: 7rem;
         border: 0.02rem solid #E5E5E5;
         margin: 0 auto;
-        margin-top: 0.32rem;
+        /* margin-top: 0.32rem; */
         margin-bottom: 0;
 
+      }
+      .ml-24{
+        margin-left: 0.24rem;
+
       }
       .fix_{
         position: fixed;
-        left: 0.24rem;
+        left: 50%;
+        transform: translateX(-50%);
         top: calc(21.2vw);
         padding-top: 0.32rem;
         background-color: #fff;  
+
       }
       .fix_analysis{
         position: fixed;
@@ -74,12 +80,13 @@
        text-align: center;
        display: table-cell;
        vertical-align: middle;
+       word-break: break-all;
       
       }
       .table_analysis{
         width: 7rem;
         border: 0.02rem solid #E5E5E5;
-        margin: 0 auto;
+        margin-left: 0.24rem;
         margin-top: 0.24rem;
         margin-bottom: 0;
 
@@ -104,6 +111,7 @@
        text-align: center;
        display: table-cell;
        vertical-align: middle;
+       word-break: break-all;
       
       }
       .table_analysis tr{
@@ -119,7 +127,7 @@
         width: 1.02rem;
       }
       .long_{
-        width: 2.16rem;
+        width: 2.4rem;
       }
       .middle{
         width: 1.92rem;
@@ -127,7 +135,7 @@
       .t_right{
         text-align: right !important;
         box-sizing: border-box;
-        padding: 0 0.24rem;
+        padding:  0 0.2rem;
       }
       .otners{
         font-size: 0.26rem;
@@ -138,11 +146,11 @@
         margin-bottom: 0.32rem;
       }
       .box{
-        /* padding-top: 1.2rem; */
+        padding-top: 1.19rem;
        
       }
       .box_analysis{
-        /* padding-top: 1.84rem; */
+        padding-top: 1.59rem;
       }
       .others{
         font-size: 0.26rem;
@@ -201,31 +209,31 @@
     {{include "/big-member/header.html"}}
     <div id="report_table" class="j-main" v-cloak>
       <div v-if = "parm=='analysis'" class="box_analysis">
-        <!-- <div class="fix_analysis">
+        <div class="fix_analysis">
           <div class="sort_box clearfix">
             <div class="tit">排序：</div>
-            <div class="btn" v-for="(item,index) in tabs" :class="{'active': index==tab}">${item}</div>
+            <div class="btn" v-for="(item,index) in tabs" :class="{'active': index==tab}" @click="sort_click(index)">${item}</div>
           </div>
           <table class="table_analysis">
             <thead>
-              <tr><th v-for="(item,index) in head_list" :class="{'sort_': index==0,'long_': index==1 ,'middle':index==2||index==3}" v-html="item"></th></tr>
+              <tr><th v-for="(item,index) in head_list" :class="{'sort_': index==0,'long_': index==3 ,'middle':index==2||index==1}" v-html="item"></th></tr>
             </thead>
           </table>
-        </div> -->
-        <div class="sort_box clearfix">
+        </div>
+        <!-- <div class="sort_box clearfix">
           <div class="tit">排序：</div>
           <div class="btn" v-for="(item,index) in tabs" :class="{'active': index==tab}" @click="sort_click(index)">${item}</div>
-        </div>
+        </div> -->
         <table class="table_analysis">
-          <thead>
-            <tr><th v-for="(item,index) in head_list" :class="{'sort_': index==0,'long_': index==1 ,'middle':index==2||index==3}" v-html="item"></th></tr>
-          </thead>
+          <!-- <thead>
+            <tr><th v-for="(item,index) in head_list" :class="{'sort_': index==0,'long_': index==3 ,'middle':index==2||index==1}" v-html="item"></th></tr>
+          </thead> -->
            <tbody>
             <tr v-for="(item,index) in data_list" >
             <td class="sort_">${index + 1}</td>
-            <td class="long_">${item.buyclass}</td>
+            <td class="middle">${item.buyclass}</td>
             <td class="t_right middle">${item.total}</td>
-            <td class="t_right middle">${item.amount}</td>
+            <td class="t_right long_">${item.amount}</td>
           </tr>
            </tbody>
         </table>
@@ -236,17 +244,17 @@
         </div>
       </div>
       <div class="box" v-else>
-        <!-- <div class="fix_">
+        <div class="fix_">
           <table class="table_ ">
           <thead>
             <tr><th v-for="(item,index) in head_list" :class="{'sort': index==0,'long': index==1 || index==2}" v-html="item"></th></tr>
           </thead>
         </table>
-        </div> -->
-        <table class="table_">
-          <thead>
+        </div>
+        <table class="table_ ">
+          <!-- <thead>
             <tr><th v-for="(item,index) in head_list" :class="{'sort': index==0,'long': index==1 || index==2}" v-html="item"></th></tr>
-          </thead>
+          </thead> -->
             <tbody>
             <tr v-for="(item,index) in data_list" >
             <td class="sort">${index + 1}</td>
@@ -345,19 +353,12 @@
       },
       analysis_data (){
         let this_=this
-        $.ajax({
-        type: 'POST',
-        url: '/bigmember/marketAnalysis/getAnalysisResult',
-        data: {
-          flag:3,
-          rid: this_.rid,
-        },
-        success: function (res) {
-          if (res && res.error_code === 0 && res.data) {
+       let res= JSON.parse(sessionStorage.getItem('getAnalysisResult_'))
+       if (res && res.error_code === 0 && res.data) {
             let data_ = res.data.customer_scale
             data_.forEach(ele => {
               if(ele.amount){
-                ele.amount=ele.amount.toFixed(2)  
+                ele.amount=utils.formatMoney(ele.amount / 10000, undefined, true)
               } 
             });
             data_.sort(function(a,b){return b.total-a.total});
@@ -367,13 +368,40 @@
             this_.data_list=newarr
             if(res.data.customer_scale_other){
               this_.analysis_num=res.data.customer_scale_other.total
-              this_.analysis_price=res.data.customer_scale_other.amount.toFixed(2)
+              this_.analysis_price=utils.formatMoney(res.data.customer_scale_other.amount / 10000, undefined, true)
             }
           } else {
             // this.$toast('请求失败')
           }
-        }
-      })
+      //   $.ajax({
+      //   type: 'POST',
+      //   url: '/bigmember/marketAnalysis/getAnalysisResult',
+      //   data: {
+      //     flag:3,
+      //     rid: this_.rid,
+      //   },
+      //   success: function (res) {
+      //     if (res && res.error_code === 0 && res.data) {
+      //       let data_ = res.data.customer_scale
+      //       data_.forEach(ele => {
+      //         if(ele.amount){
+      //           ele.amount=utils.formatMoney(ele.amount / 10000, undefined, true)
+      //         } 
+      //       });
+      //       data_.sort(function(a,b){return b.total-a.total});
+      //       let newarr = data_.filter(function (item, index) {
+      //         return !(item['amount'] ==0 && item['total'] ==0 )
+      //       })
+      //       this_.data_list=newarr
+      //       if(res.data.customer_scale_other){
+      //         this_.analysis_num=res.data.customer_scale_other.total
+      //         this_.analysis_price=utils.formatMoney(res.data.customer_scale_other.amount / 10000, undefined, true)
+      //       }
+      //     } else {
+      //       // this.$toast('请求失败')
+      //     }
+      //   }
+      // })
       },
       monthdata(){
         var that = this

src/web/staticres/common-module/report-analysis/js/report_analysis.js

@@ -311,6 +311,7 @@ var vm = new Vue({
       this.rid = decodeURIComponent(id)
       this.filtersPageShow = false
     }
+    
   },
   mounted: function () {
     setTimeout(() => {
@@ -835,8 +836,13 @@ var vm = new Vue({
         url: '/bigmember/marketAnalysis/getAnalysisResult',
         data: query,
         success: function (res) {
-          if (res && res.error_code === 0 && res.data) {
+          if (res && res.error_code === 0 && res.data) {  
+            if(flag==3){
+              sessionStorage.setItem('getAnalysisResult_',JSON.stringify(res))
+            }
             this.formatterData(flag, res.data)
+          
+            
           } else {
             this.$toast('请求失败')
           }
@@ -864,7 +870,12 @@ var vm = new Vue({
         // 地区规模分布
         this.sortAreaScatter(data.area_infos)
         // 客户分布
-        this.sortUserScatter(data.customer_scale)
+        if(data.customer_scale){
+          if(data.customer_scale.length!=0){
+            let data_=data.customer_scale.slice(0,10)
+            this.sortUserScatter(data_)
+          }
+        }
         // 地区分布及客户分布Top3
         this.sortAreaUserTop3(data)
       } else if (flag === 4) {

src/web/templates/big-member/wx/page_report_table.html

@@ -26,13 +26,14 @@
         width: 7rem;
         border: 0.02rem solid #E5E5E5;
         margin: 0 auto;
-        margin-top: 0.32rem;
+        /* margin-top: 0.32rem; */
         margin-bottom: 0;
 
       }
       .fix_{
         position: fixed;
-        left: 0.24rem;
+        left: 50%;
+        transform: translateX(-50%);
         top: 0;
         padding-top: 0.32rem;
         background-color: #fff;  
@@ -75,12 +76,13 @@
        text-align: center;
        display: table-cell;
        vertical-align: middle;
+       word-break: break-all;
       
       }
       .table_analysis{
         width: 7rem;
         border: 0.02rem solid #E5E5E5;
-        margin: 0 auto;
+        margin-left: 0.24rem;
         margin-top: 0.24rem;
         margin-bottom: 0;
 
@@ -105,6 +107,7 @@
        text-align: center;
        display: table-cell;
        vertical-align: middle;
+       word-break: break-all;
       
       }
       .table_analysis tr{
@@ -120,7 +123,7 @@
         width: 1.02rem;
       }
       .long_{
-        width: 2.16rem;
+        width: 2.4rem;
       }
       .middle{
         width: 1.92rem;
@@ -128,7 +131,7 @@
       .t_right{
         text-align: right !important;
         box-sizing: border-box;
-        padding: 0 0.24rem;
+        padding: 0 0.2rem;
       }
       .otners{
         font-size: 0.26rem;
@@ -138,12 +141,16 @@
         margin-top: 0.32rem;
         margin-bottom: 0.32rem;
       }
+      .ml-24{
+        margin-left: 0.24rem;
+
+      }
       .box{
-        /* padding-top: 1.2rem; */
+        padding-top: 1.19rem;
        
       }
       .box_analysis{
-        /* padding-top: 1.84rem; */
+        padding-top: 1.59rem;
       }
       .others{
         font-size: 0.26rem;
@@ -200,31 +207,31 @@
   <div class="j-container">
     <div id="report_table" class="j-main" v-cloak>
       <div v-if = "parm=='analysis'" class="box_analysis">
-        <!-- <div class="fix_analysis">
+        <div class="fix_analysis">
           <div class="sort_box clearfix">
             <div class="tit">排序：</div>
-            <div class="btn" v-for="(item,index) in tabs" :class="{'active': index==tab}">${item}</div>
+            <div class="btn" v-for="(item,index) in tabs" :class="{'active': index==tab}"  @click="sort_click(index)">${item}</div>
           </div>
           <table class="table_analysis">
             <thead>
-              <tr><th v-for="(item,index) in head_list" :class="{'sort_': index==0,'long_': index==1 ,'middle':index==2||index==3}" v-html="item"></th></tr>
+              <tr><th v-for="(item,index) in head_list" :class="{'sort_': index==0,'long_': index==3 ,'middle':index==2||index==1}" v-html="item"></th></tr>
             </thead>
           </table>
-        </div> -->
-        <div class="sort_box clearfix">
+        </div>
+        <!-- <div class="sort_box clearfix">
           <div class="tit">排序：</div>
           <div class="btn" v-for="(item,index) in tabs" :class="{'active': index==tab}" @click="sort_click(index)">${item}</div>
-        </div>
+        </div> -->
         <table class="table_analysis">
-          <thead>
-            <tr><th v-for="(item,index) in head_list" :class="{'sort_': index==0,'long_': index==1 ,'middle':index==2||index==3}" v-html="item"></th></tr>
-          </thead>
+          <!-- <thead>
+            <tr><th v-for="(item,index) in head_list" :class="{'sort_': index==0,'long_': index==3 ,'middle':index==2||index==1}" v-html="item"></th></tr>
+          </thead> -->
            <tbody>
             <tr v-for="(item,index) in data_list" >
             <td class="sort_">${index + 1}</td>
-            <td class="long_">${item.buyclass}</td>
+            <td class="middle">${item.buyclass}</td>
             <td class="t_right middle">${item.total}</td>
-            <td class="t_right middle">${item.amount}</td>
+            <td class="t_right long_">${item.amount}</td>
           </tr>
            </tbody>
         </table>
@@ -235,17 +242,17 @@
         </div>
       </div>
       <div class="box" v-else>
-        <!-- <div class="fix_">
+        <div class="fix_">
           <table class="table_ ">
           <thead>
             <tr><th v-for="(item,index) in head_list" :class="{'sort': index==0,'long': index==1 || index==2}" v-html="item"></th></tr>
           </thead>
         </table>
-        </div> -->
-        <table class="table_">
-          <thead>
+        </div>
+        <table class="table_ ">
+          <!-- <thead>
             <tr><th v-for="(item,index) in head_list" :class="{'sort': index==0,'long': index==1 || index==2}" v-html="item"></th></tr>
-          </thead>
+          </thead> -->
             <tbody>
             <tr v-for="(item,index) in data_list" >
             <td class="sort">${index + 1}</td>
@@ -336,19 +343,12 @@
       },
       analysis_data (){
         let this_=this
-        $.ajax({
-        type: 'POST',
-        url: '/bigmember/marketAnalysis/getAnalysisResult',
-        data: {
-          flag:3,
-          rid: this_.rid,
-        },
-        success: function (res) {
-          if (res && res.error_code === 0 && res.data) {
+        let res= JSON.parse(sessionStorage.getItem('getAnalysisResult_'))
+        if (res && res.error_code === 0 && res.data) {
             let data_ = res.data.customer_scale
             data_.forEach(ele => {
               if(ele.amount){
-                ele.amount=ele.amount.toFixed(2)  
+                ele.amount=(ele.amount / 10000).toFixed(2)
               } 
             });
             data_.sort(function(a,b){return b.total-a.total});
@@ -358,13 +358,41 @@
             this_.data_list=newarr
             if(res.data.customer_scale_other){
               this_.analysis_num=res.data.customer_scale_other.total
-              this_.analysis_price=res.data.customer_scale_other.amount.toFixed(2)
+              this_.analysis_price=(res.data.customer_scale_other.amount / 10000).toFixed(2)
             }
           } else {
             // this.$toast('请求失败')
           }
-        }
-      })
+      
+      //   $.ajax({
+      //   type: 'POST',
+      //   url: '/bigmember/marketAnalysis/getAnalysisResult',
+      //   data: {
+      //     flag:3,
+      //     rid: this_.rid,
+      //   },
+      //   success: function (res) {
+      //     if (res && res.error_code === 0 && res.data) {
+      //       let data_ = res.data.customer_scale
+      //       data_.forEach(ele => {
+      //         if(ele.amount){
+      //           ele.amount=(ele.amount / 10000).toFixed(2)
+      //         } 
+      //       });
+      //       data_.sort(function(a,b){return b.total-a.total});
+      //       let newarr = data_.filter(function (item, index) {
+      //         return !(item['amount'] ==0 && item['total'] ==0 )
+      //       })
+      //       this_.data_list=newarr
+      //       if(res.data.customer_scale_other){
+      //         this_.analysis_num=res.data.customer_scale_other.total
+      //         this_.analysis_price=(res.data.customer_scale_other.amount / 10000).toFixed(2)
+      //       }
+      //     } else {
+      //       // this.$toast('请求失败')
+      //     }
+      //   }
+      // })
       },
       monthdata(){
         var that = this