浏览代码

fix: 自定义分析报告:ios吸顶兼容问题&空状态文字显示问题

cuiyalong 3 年之前
父节点
当前提交
d5380eb805

+ 26 - 8
src/jfw/modules/app/src/web/staticres/jyapp/big-member/css/report_analysis.css

@@ -154,9 +154,6 @@
   font-size: .32rem;
   line-height: .4rem;
 }
-.van-tabs + .j-main {
-  margin-top: .1rem;
-}
 
 /* analysis-page */
 .pd-16 {
@@ -168,10 +165,10 @@
 .height8 {
   height: .16rem;
   width: 100%;
+  color: transparent;
   background-color: transparent;
 }
 
-
 .filters-title {
   display: flex;
   align-items: center;
@@ -182,6 +179,10 @@
   font-size: .4rem;
   font-weight: 700;
 }
+.filters-list {
+  margin-bottom: .16rem;
+  border-top: 1px solid transparent;
+}
 .filters-list .van-cell {
   height: 1.08rem;
 }
@@ -264,7 +265,7 @@
   color: #161826;
   font-size: .4rem;
 }
-.search-result .section {
+.search-result .section:not(:first-of-type) {
   position: relative;
   margin-top: .16rem;
 }
@@ -278,7 +279,7 @@
   line-height: .52rem;
   font-size: .36rem;
 }
-.search-result .section .section-content {
+.search-result .section:not(:first-of-type) .section-content {
   margin: .16rem 0;
   padding: .12rem 0;
 }
@@ -320,8 +321,23 @@
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   width: 100%;
-  height: 2.4rem;
+  min-height: 2.5rem;
+}
+
+.search-result .dimension .section-content {
+  padding: .28rem 0;
+}
+.van-sticky--fixed {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 1.32rem;
+  background-color: #fff;
+}
+.van-sticky--fixed .dimension-list {
+  padding: 0!important;
 }
 .search-result .dimension > div {
   width: 100%;
@@ -481,11 +497,13 @@
   align-items: center;
   justify-content: space-between;
 }
+.market-top3-table .project-name {
+  max-width: 4rem;
+}
 .project-top-item .p-t-i-hd-r .project-name {
   font-size: .28rem;
   color: #1D1D1D;
   line-height: .48rem;
-  max-width: 4rem;
   flex: 1;
 }
 .project-top-item .p-t-i-hd-r .project-tags {

+ 22 - 14
src/jfw/modules/app/src/web/staticres/jyapp/big-member/js/components/marketSegment.js

@@ -186,20 +186,28 @@ var marketSegment = {
           }
         }
 
-        // 设置时间轴
-        Object.assign(options, {
-          grid: {
-            left: '5%',
-            right: '10%'
-          },
-          dataZoom: {
-            show: true, // 显示滚动条
-            realtime: true, // 拖动时,是否实时更新系列的视图
-            type: 'slider',
-            height: 20,
-            bottom: 0
-          }
-        })
+        if (this.chartData.rows.length > 8) {
+          // 设置时间轴
+          Object.assign(options, {
+            // grid解决dataZoom文字被隐藏的问题
+            // https://github.com/apache/echarts/issues/11601
+            grid: {
+              left: '5%',
+              right: '13%'
+            },
+            dataZoom: {
+              show: true, // 显示滚动条
+              realtime: true, // 拖动时,是否实时更新系列的视图
+              type: 'slider',
+              height: 20,
+              bottom: 0,
+              textStyle: {
+                fontSize: 10
+              }
+            }
+          })
+        }
+
         options.legend.bottom = 30
         options.legend.formatter = name => {
           return `${name}(${suffix})`

+ 26 - 4
src/jfw/modules/app/src/web/staticres/jyapp/big-member/js/report_analysis.js

@@ -229,6 +229,10 @@ var vm = new Vue({
         projectAmountTop3: null
       }
     },
+    empty: {
+      defaultMsg: '对不起,没有匹配到相关信息<br />请修改您的分析条件',
+      msg: ''
+    },
     stickyOffset: 0,
     notSetKey: false, // 未设置关键词
     isSubCount: false // 是否子账号
@@ -304,6 +308,8 @@ var vm = new Vue({
         if (this.rid) {
           this.getReportResult()
         }
+      } else {
+        this.$nextTick(this.calcOffsetTop)
       }
     }, 0)
     this.addEventListeners()
@@ -402,7 +408,7 @@ var vm = new Vue({
         var headerHeight = $('.jy-app-header')[0].clientHeight
         var tabHeight = $('.analysis-tab')[0].clientHeight
         this.stickyOffset = headerHeight + tabHeight - 5
-      }.bind(this), 0)
+      }.bind(this), 1000)
     },
     setScrollTop: function (scrollTop) {
       this.$nextTick(function () {
@@ -665,7 +671,9 @@ var vm = new Vue({
           if (res && res.error_code === 0 && res.data) {
             this.rid = res.data
             this.analysis.loaded = true
-            location.replace('./report_analysis?id=' + res.data)
+            // location.replace('./report_analysis?id=' + res.data)
+            this.rid = res.data
+            this.getReportResult()
           } else {
             this.$toast(res.error_msg)
           }
@@ -716,13 +724,18 @@ var vm = new Vue({
 
       return $data
     },
-    onEmpty () {
+    onEmpty (info) {
       if (this.loading) {
         this.loading.clear()
       }
       this.filtersPageShow = true
       this.analysis.loaded = true
       this.rid = ''
+      if (info && info.msg) {
+        this.empty.msg = info.msg
+      } else {
+        this.empty.msg = this.empty.defaultMsg
+      }
     },
     sendRequest () {
       // 先请求概况(1),判断报告是否为空
@@ -747,7 +760,11 @@ var vm = new Vue({
           return this.onEmpty()
         }
       } else {
-        return this.onEmpty()
+        if (res.error_msg.indexOf('项目数量超出上限') === -1) {
+          return this.onEmpty()
+        } else {
+          return this.onEmpty({ msg: '当前分析条件涉及项目数量已超过最大限制,请修改分析条件进行精确分析' })
+        }
       }
 
       this.filtersPageShow = false
@@ -1691,6 +1708,11 @@ var vm = new Vue({
         this.$set(this.sections.winner, 'projectAmountTop3', dataAmount.rows)
       }
     },
+    toAnalysisPage: function () {
+      this.rid = ''
+      this.analysis.loaded = false
+      this.filtersPageShow = true
+    },
     moneyUnit (num, type, lv) {
       const m = utils.moneyUnit(num, type, lv)
       let unit = String(m).match(/[\u4e00-\u9fa5]/g)

+ 7 - 3
src/jfw/modules/app/src/web/templates/big-member/page_report_analysis.html

@@ -43,7 +43,10 @@
             <section v-show="tabActiveName === 'analysis'" class="j-main analysis-content">
                 <div class="j-container search-filters bg-white" v-show="filtersPageShow && !rid">
                     <div class="j-main">
-                        <div class="filters-title pd-lr16">分析条件</div>
+                        <div class="height8">height8</div>
+                        <div class="filters-title pd-lr16">
+                            <span>分析条件</span>
+                        </div>
                         <van-cell-group class="filters-list">
                             <van-cell center title="分析内容" is-link value-class="ellipsis" :value="resolveSelected('keys')" @click="clickCell('keys')"></van-cell>
                             <van-cell center title="区域" is-link value-class="ellipsis" :value="resolveSelected('area')" @click="clickCell('area')"></van-cell>
@@ -63,7 +66,7 @@
                                 <div class="image">
                                     <img src='/common-module/public/image/jy-sleep.png'>
                                 </div>
-                                <div class="empty-main tip-text">对不起,没有匹配到相关信息<br />请修改您的分析条件</div>
+                                <div class="empty-main tip-text" v-html="empty.msg"></div>
                             </div>
                         </div>
                     </div>
@@ -74,8 +77,9 @@
                 </div>
                 <div class="j-container search-result" v-show="!filtersPageShow && rid">
                     <div class="j-main">
+                        <div class="height8">height8</div>
                         <van-cell-group class="filters-list">
-                            <van-cell center title="分析条件" is-link @click="filtersPageShow = true; rid = ''"></van-cell>
+                            <van-cell center title="分析条件" is-link @click="toAnalysisPage"></van-cell>
                         </van-cell-group>
                         <div class="height8" v-show="false"></div>
                         <section class="section bg-white dimension">