fix: 分析报告nav置顶问题

src/App.vue

@@ -34,4 +34,10 @@ export default {
 .big-member-page .el-loading-mask {
   z-index: 98;
 }
+.fixed-nav {
+  width: 100%;
+  position: fixed;
+  top: 63px;
+  z-index: 999;
+}
 </style>

src/components/work-desktop/Slidebar.vue

@@ -136,7 +136,6 @@ export default {
       window.open(routeUrl.href)
     },
     setDefaultActive () {
-      console.log(this.$route)
       if (this.$route.name === 'desktop') {
         this.defaultActive = '我的主页'
       } else if (this.$route.path.indexOf('report_analysis') !== -1) {

src/utils/globalDirectives.js

@@ -27,25 +27,33 @@ Vue.directive('auto-focus', {
 
 // fix固定元素
 // 传入距离顶部高度x，当滚动高度大于x则添加fix定位
-Vue.directive('fixed-nav', {
-  inserted (el) {
+Vue.directive('stickyed', {
+  inserted (el, binding) {
     const $el = $(el)
-    const offsetTop = el.offsetTop // 元素距离顶部高度
-    const fixedClass = 'fixed-nav'
+    const conf = {
+      className: ['fixed-nav'], // 置顶后添加的默认类名
+      startFixedTop: el.offsetTop // 从高度为startFixedTop处开始置顶，默认为元素距离顶部高度
+    }
+
+    el.handleWindowScrollStickyEvent = function (e) {
+      const value = binding.value
+      if (value.className) {
+        conf.className = conf.className.concat(value.className)
+      }
+      if (value.startFixedTop) {
+        conf.startFixedTop = value.startFixedTop
+      }
 
-    el.handleWindowScrollEvent = function (e) {
       const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
-      // console.log(scrollTop, offsetTop)
-      // 官网导航栏高度(64)
-      if (scrollTop >= offsetTop) {
-        $el.addClass(fixedClass)
+      if (scrollTop >= conf.startFixedTop) {
+        $el.addClass(conf.className.join(' '))
       } else {
-        $el.removeClass(fixedClass)
+        $el.removeClass(conf.className.join(' '))
       }
     }
-    window.addEventListener('scroll', el.handleWindowScrollEvent, false)
+    window.addEventListener('scroll', el.handleWindowScrollStickyEvent, false)
   },
   unbind (el) {
-    el && window.removeEventListener('scroll', el.handleWindowScrollEvent, false)
+    el && window.removeEventListener('scroll', el.handleWindowScrollStickyEvent, false)
   }
 })

src/views/analysisReport/MarketAnalysis.vue

@@ -8,13 +8,16 @@
     </div>
     <el-collapse-transition>
       <div class="market-filter-container pd-lr20" v-show="showMoreFilters" v-loading="loading">
-        <PopSelector @onChange="changeKeys" ref="keySelector" selectorType="line" :showMoreKeyInfoWithCard="true">
+        <PopSelector @onChange="changeKeys" ref="keySelector" selectorType="line" :showMoreKeyInfoWithCard="true" v-show="showKeyCount">
           <div slot="header" class="filter-label">分析内容：</div>
         </PopSelector>
-        <div class="tip-container button-group bottom-divider">
-          <div class="tip-text">注：如需新增分析内容，请完善您的订阅关键词组</div>
-          <button class="button-submit" @click="toSubManage">订阅管理<i class="el-icon-arrow-right"></i></button>
-        </div>
+        <SelectorCard class="bottom-divider" cardType="line">
+          <div slot="header" class="filter-label">{{ showKeyCount ? '' : '分析内容：' }}</div>
+          <div slot="default" class="tip-container button-group">
+            <div class="tip-text" :class="{ 'color-red': !showKeyCount }">注：如需新增分析内容，请完善您的订阅关键词组</div>
+            <button class="button-submit" @click="toSubManage">订阅管理<i class="el-icon-arrow-right"></i></button>
+          </div>
+        </SelectorCard>
         <TimeSelector class="bottom-divider" @onChange="changeTime" ref="timeSelector" defaultSelectedKey="sinceYearBeforeLast" selectorTime="more" selectorType="line">
           <div slot="header" class="filter-label">时间：</div>
         </TimeSelector>
@@ -42,6 +45,7 @@
 <script>
 import { Button, Icon } from 'element-ui'
 import CollapseTransition from 'element-ui/lib/transitions/collapse-transition'
+import SelectorCard from '@/components/selector/SelectorCard.vue'
 import AreaSelector from '@/components/selector/AreaSelector.vue'
 import PopSelector from '@/components/selector/PopSelector.vue'
 import TimeSelector from '@/components/selector/TimeSelector.vue'
@@ -58,6 +62,7 @@ export default {
     [Button.name]: Button,
     [Icon.name]: Icon,
     [CollapseTransition.name]: CollapseTransition,
+    SelectorCard,
     AreaSelector,
     PopSelector,
     TimeSelector,
@@ -67,6 +72,7 @@ export default {
   },
   data () {
     return {
+      showKeyCount: true,
       timerId: '',
       analysisDone: false, // 当前页面是否进行自己选择分析过
       showMoreFilters: true,
@@ -133,22 +139,31 @@ export default {
     },
     initKeyMap () {
       const tempKeys = {}
+      let keyCount = 0
       this.getAllKeyMap().forEach(v => {
         const tempArr = []
-        v.a_key.forEach(s => {
-          let key = s?.key || []
-          if (s?.appendkey && s?.key) {
-            key = key.concat(s?.appendkey)
-          }
-          tempArr.push({
-            ...s,
-            key: key.join(' '),
-            notkey: Array.isArray(s.notkey) ? s.notkey.join(' ') : ''
+        if (v && Array.isArray(v.a_key)) {
+          v.a_key.forEach(s => {
+            keyCount++
+            let key = s?.key || []
+            if (s?.appendkey && s?.key) {
+              key = key.concat(s?.appendkey)
+            }
+            tempArr.push({
+              ...s,
+              key: key.join(' '),
+              notkey: Array.isArray(s.notkey) ? s.notkey.join(' ') : ''
+            })
           })
-        })
-        tempKeys[v.s_item] = tempArr
+          tempKeys[v.s_item] = tempArr
+        }
       })
-      this.$refs.keySelector.initDataMap(tempKeys)
+
+      if (keyCount <= 0) {
+        this.showKeyCount = false
+      } else {
+        this.$refs.keySelector.initDataMap(tempKeys)
+      }
     },
     initDefaultTime () {
       const timeSelector = this.$refs.timeSelector
@@ -319,7 +334,7 @@ export default {
           center: true
         })
       } else {
-        const routeUrl = this.$router.resolve({ path: '/set_subscribe/config' })
+        const routeUrl = this.$router.resolve({ path: '/set_subscribe/config?scroll=setkey' })
         window.open(routeUrl.href)
       }
     }
@@ -423,13 +438,18 @@ export default {
 }
 
 .tip-container {
-  padding: 0 0 12px 130px;
   display: flex;
   align-items: center;
+  padding: 0;
+  width: 100%;
   .tip-text {
     margin-right: 12px;
     color: #686868;
+    font-size: 14px;
     line-height: 22px;
+    &.color-red {
+      color: #FF3A20;
+    }
   }
   .button-submit {
     padding: 3px 14px;

src/views/analysisReport/MarketAnalysisResult.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="market-analysis-result">
     <div class="analysis-result-anchors">
-      <div class="analysis-dimensions analysis-wrap" v-fixed-nav>
+      <div class="analysis-dimensions analysis-wrap" v-stickyed="stickyed">
         <div class="analysis-label">报告分析维度：</div>
         <div class="analysis-content">
           <el-dropdown
@@ -14,7 +14,7 @@
             v-for="(value, key) in dimensionsTitle"
             :key="key"
             size="small">
-            <span class="el-dropdown-link">
+            <span class="el-dropdown-link" @click="dropDownClick(value)">
               <span class="dropdown-text">{{ value.name }}</span>
               <i class="el-icon-caret-bottom" :class="{ highlight: value.dropDownShow }"></i>
             </span>
@@ -40,7 +40,7 @@
     </div>
     <div class="bg-grey-h24"></div>
     <div class="analysis-result-list">
-      <section class="analysis-result-section">
+      <section class="analysis-result-section section-market">
         <div class="analysis-result-title pd-lr20">市场规模</div>
         <div class="analysis-result-content sub-section-list">
           <!-- 市场概况 -->
@@ -172,8 +172,8 @@
           </div>
         </div>
       </section>
-      <div class="bg-grey-h24" v-if="buyerclassSectionShow"></div>
-      <section class="analysis-result-section"
+      <div class="bg-grey-h24" v-if="!sections.loaded.buyerWinner || buyerclassSectionShow"></div>
+      <section class="analysis-result-section section-buyer"
         v-if="!sections.loaded.buyerWinner || (buyerclassSectionShow && sections.loaded.buyerWinner)"
         v-loading="!sections.loaded.buyerWinner">
         <div class="analysis-result-title pd-lr20">采购单位</div>
@@ -199,8 +199,8 @@
           </div>
         </div>
       </section>
-      <div class="bg-grey-h24" v-if="winnerSectionShow"></div>
-      <section class="analysis-result-section"
+      <div class="bg-grey-h24" v-if="!sections.loaded.buyerWinner || winnerSectionShow"></div>
+      <section class="analysis-result-section section-winner"
         v-if="!sections.loaded.buyerWinner || (winnerSectionShow && sections.loaded.buyerWinner)"
         v-loading="!sections.loaded.buyerWinner">
         <div class="analysis-result-title pd-lr20">中标单位</div>
@@ -268,6 +268,10 @@ export default {
     return {
       loaded: false,
       loading: false,
+      stickyed: {
+        className: ['dim-fixed'],
+        startFixedTop: 0 // 从高度为startFixedTop处开始置顶
+      },
       reportFilters: {
         keys: [],
         selectTime: '',
@@ -279,14 +283,20 @@ export default {
       dimensionsTitle: {
         market: {
           name: '市场规模',
+          anchor: 'section-market',
+          show: true,
           dropDownShow: false
         },
         buyer: {
           name: '采购单位',
+          anchor: 'section-buyer',
+          show: true,
           dropDownShow: false
         },
         winner: {
           name: '中标单位',
+          anchor: 'section-winner',
+          show: true,
           dropDownShow: false
         }
       },
@@ -458,8 +468,16 @@ export default {
   created () {
     this.sendRequest()
   },
-  mounted () {},
+  mounted () {
+    this.calcStickyNav()
+  },
   methods: {
+    calcStickyNav () {
+      const offset = $(`.${this.dimensionsTitle.market.anchor}`).offset()
+      if (offset) {
+        this.stickyed.startFixedTop = offset.top + 5
+      }
+    },
     onEmpty () {
       this.$emit('onEmpty')
     },
@@ -602,7 +620,7 @@ export default {
         {
           label: '项目平均金额',
           unit: '万元',
-          count: 10.04,
+          count: 0,
           ringRatio: 0
         },
         {
@@ -818,6 +836,7 @@ export default {
       }
 
       if (total) {
+        scaleData.rows.reverse()
         this.$set(this.sections.projectScatter, 'chartData', scaleData)
         if (this.sections.projectScatter.tableData.length) {
           this.showDimensionsOptions('market', 'project-scatter')
@@ -1513,8 +1532,9 @@ export default {
       if (!item.show) return
       const anchor = item.anchor
       const offset = $('.' + anchor).offset()
+      const headerH = $('#public-nav')[0]?.clientHeight || 0
       if (offset) {
-        $('body,html').animate({ scrollTop: offset.top })
+        $('body,html').animate({ scrollTop: offset.top + headerH + 64 })
       }
     },
     moneyUnit (...args) {
@@ -1650,6 +1670,7 @@ i.el-icon-caret-bottom {
 
 .analysis-result-anchors {
   padding: 20px;
+  height: 120px;
   border-radius: 4px;
 }
 
@@ -1757,4 +1778,13 @@ i.el-icon-caret-bottom {
     }
   }
 }
+
+.dim-fixed {
+  left: calc(50% + 100px);
+  transform: translateX(-50%);
+  width: 1000px;
+  padding: 16px;
+  background-color: #fff;
+  box-shadow: 0px 4px 16px 1px rgba(0, 0, 0, 0.06);
+}
 </style>

src/views/subscribe/Config.vue

@@ -3,7 +3,7 @@
     <!-- 订阅设置 -->
     <sub-config :datas="setData" @update="getUpdate"></sub-config>
     <!-- 关键词设置 -->
-    <key-config :datas="setData" @update="getUpdate"></key-config>
+    <key-config id="setkey" :datas="setData" @update="getUpdate"></key-config>
     <!-- 关键词列表 -->
     <key-list v-if="setData.keyList.length > 0" ref="keyConfigRef" :datas="setData"></key-list>
     <el-dialog
@@ -84,8 +84,19 @@ export default {
       // this.updateKeyWordsApi(data)
       this.getBigInfo()
     })
+    setTimeout(this.scrollToId, 100)
   },
   methods: {
+    scrollToId () {
+      const { scroll } = this.$route.query
+      if (scroll === 'setkey') {
+        const headerH = $('#public-nav').height() || 0
+        const offset = $('#setkey').offset()
+        if (offset) {
+          $('body,html').animate({ scrollTop: offset.top + headerH })
+        }
+      }
+    },
     parentGetCurEdit () {
       const t = this.$refs.keyConfigRef.getCurEdit()
       return t