fix: 关键词函数新增恢复状态方法修复

src/components/report-data/ReportList.vue

@@ -275,12 +275,14 @@ export default {
 <style>
 .el-tooltip__popper.is-dark{
   max-width: 300px;
+  line-height: 18px;
 }
 </style>
 <style lang="scss" scoped>
   .info-list-group {
     width: 1000px;
     margin: 0 auto;
+    margin-top: 24px;
     padding: 0 20px;
     box-sizing: border-box;
     background: #fff;

src/components/selector/PopSelector.vue

@@ -147,9 +147,7 @@ export default {
       this.$set(this.selectInfo, 'origin', tempData.origin)
       this.$set(this.selectInfo, 'originMap', tempData.originMap)
       this.$set(this.selectInfo, 'popMap', tempData.popMap)
-      this.$nextTick(() => {
-        this.computRow()
-      })
+      this.computRow()
     },
     submitChange (type) {
       if (type) {
@@ -203,8 +201,10 @@ export default {
       }
     },
     computRow () {
-      $('.p-selector--group .p-selector--item').each(function () {
-        $(this).attr('data-row', parseInt($(this).position().top / 34))
+      this.$nextTick(() => {
+        $('.p-selector--group .p-selector--item').each(function () {
+          $(this).attr('data-row', parseInt($(this).position().top / 34))
+        })
       })
     },
     changePosition (e) {
@@ -303,6 +303,7 @@ export default {
       this.refreshOriginMap()
     },
     refreshOriginMap () {
+      const classifySelectedState = []
       for (const cname in this.selectInfo.popMap) {
         const keysArr = this.selectInfo.popMap[cname]
         if (!Array.isArray(keysArr)) {
@@ -323,7 +324,16 @@ export default {
         const selectedCount = selectedKeysArr.length
         this.selectInfo.originMap[cname].select = selectedCount > 0
         this.selectInfo.originMap[cname].selectAll = selectedCount > 0 && selectedCount === keysArr.length
+        if (this.selectInfo.originMap[cname].selectAll) {
+          keysArr.forEach(key => (key.checked = false))
+        }
         this.selectInfo.originMap[cname].selects = selectedKeysArr
+
+        classifySelectedState.push(this.selectInfo.originMap[cname])
+      }
+
+      if (classifySelectedState.indexOf(false) === -1) {
+        this.selectAllForTop()
       }
     },
     onChange (selected) {
@@ -450,8 +460,8 @@ export default {
           position: absolute;
           right: -2px;
           bottom: -2px;
-          width: 26px;
-          height: 26px;
+          width: 20px;
+          height: 20px;
           background-image: url(~@/assets/images/spec-active.png);
           background-repeat: no-repeat;
           background-size: contain;

src/components/work-desktop/Slidebar.vue

@@ -7,7 +7,7 @@
       ref="menu"
       @select="onMenuSelect"
     >
-      <el-menu-item index="我的主页" @click.native="$router.push('/')">
+      <el-menu-item index="我的主页" @click.native="toIndex">
         <i class="iconfont icon-hui7"></i>
         <span slot="title">我的主页</span>
       </el-menu-item>
@@ -128,7 +128,15 @@ export default {
         this.$refs.menu.activeIndex = this.defaultActive
       })
     },
+    toIndex () {
+      if (this.$route.name === 'desktop') return
+      const routeUrl = this.$router.resolve({
+        path: '/'
+      })
+      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/views/analysisReport/MarketAnalysis.vue

@@ -9,23 +9,23 @@
     <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">
-          <div slot="header">分析内容：</div>
+          <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>
         <TimeSelector class="bottom-divider" @onChange="changeTime" ref="timeSelector" defaultSelectedKey="sinceYearBeforeLast" selectorTime="more" selectorType="line">
-          <div slot="header">时间：</div>
+          <div slot="header" class="filter-label">时间：</div>
         </TimeSelector>
         <AreaSelector class="bottom-divider" @onChange="changeArea" ref="areaSelector" selectorType="line">
-          <div slot="header">项目地区：</div>
+          <div slot="header" class="filter-label">项目地区：</div>
         </AreaSelector>
         <IndustrySelector class="bottom-divider" @onChange="changeIndustry" ref="industrySelector" selectorType="line">
-          <div slot="header">行业：</div>
+          <div slot="header" class="filter-label">行业：</div>
         </IndustrySelector>
         <IndustrySelector class="bottom-divider" @onChange="changeBuyer" ref="buyerclassSelector" dataType="buyer" selectorType="line">
-          <div slot="header">采购单位类型：</div>
+          <div slot="header" class="filter-label">采购单位类型：</div>
         </IndustrySelector>
         <div class="action-button-group flex-r-c center button-group">
           <button class="button-default" @click="resetFilters">重置</button>
@@ -67,6 +67,7 @@ export default {
   },
   data () {
     return {
+      timerId: '',
       analysisDone: false, // 当前页面是否进行自己选择分析过
       showMoreFilters: true,
       loaded: false,
@@ -89,6 +90,18 @@ export default {
     })
   },
   watch: {
+    showMoreFilters (newVal) {
+      if (newVal) {
+        try {
+          if (this.timerId) clearTimeout(this.timerId)
+          this.timerId = setTimeout(() => {
+            this.$refs.keySelector.computRow()
+          }, 200)
+        } catch (error) {
+          console.log(error)
+        }
+      }
+    },
     bigKeywordsData () {
       this.initKeyMap()
     }
@@ -110,6 +123,7 @@ export default {
       const { id } = this.$route.query
       if (id) {
         this.analysisReportId = id
+        this.showMoreFilters = false
         this.loaded = true
       }
     },
@@ -180,7 +194,6 @@ export default {
     },
     changeKeys () {
       this.filters.keys = this.$refs.keySelector.getSelectedDetailList()
-      console.log(this.filters.keys)
     },
     changeTime (item) {
       let time = parseInt(item.start / 1000)
@@ -270,6 +283,9 @@ export default {
       keys.forEach(classify => {
         if (Array.isArray(classify.a_key)) {
           classify.a_key.forEach(item => {
+            if (Array.isArray(item.appendkey)) {
+              item.key = item.key.concat(item.appendkey)
+            }
             keysArr.push(item.key.join(' '))
           })
         }
@@ -343,6 +359,10 @@ export default {
   padding: 0 20px;
 }
 .market {
+  &-filter-container {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
   &-title {
     display: flex;
     align-items: center;
@@ -360,13 +380,23 @@ export default {
       justify-content: center;
       width: 24px;
       height: 18px;
-      background: #F4F5F7;
+      background-color: #F4F5F7;
       border-radius: 2px;
+      border: 1px solid transparent;
       cursor: pointer;
+      &:hover {
+        color: #2CB7CA;
+        border-color: #2CB7CA;
+      }
     }
   }
 }
 
+.filter-label {
+  color: #686868;
+  font-size: 14px;
+}
+
 .button-group {
   background-color: #fff;
   padding: 20px 0;

src/views/analysisReport/MarketAnalysisResult.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="market-analysis-result">
-    <div class="analysis-result-anchors pd-lr20">
+    <div class="analysis-result-anchors">
       <div class="analysis-dimensions analysis-wrap" v-fixed-nav>
         <div class="analysis-label">报告分析维度：</div>
         <div class="analysis-content">
@@ -53,12 +53,15 @@
             </div>
           </div>
           <!-- 项目规模分布 -->
-          <div class="sub-section project-scatter" v-if="sections.projectScatter.dataAlready">
+          <div class="sub-section project-scatter"
+            v-if="!sections.loaded.top3 || (sections.projectScatter.dataAlready && sections.loaded.top3)"
+            v-loading="!sections.loaded.top3">
             <div class="sub-section-header">
               <div class="sub-section-title">项目规模分布</div>
             </div>
             <div class="sub-section-content">
               <ProjectScatter
+                v-if="sections.projectScatter.dataAlready"
                 :chartData="sections.projectScatter.chartData"
                 :tableData="sections.projectScatter.tableData"
               />
@@ -86,71 +89,93 @@
             </div>
           </div>
           <!-- 地区分布 -->
-          <div class="sub-section area-scatter" v-if="sections.areaScatter.dataAlready && oneAreaFilter">
+          <div class="sub-section area-scatter"
+            v-if="(!sections.loaded.top3 && notOneAreaFilter) || (sections.areaScatter.dataAlready && sections.loaded.top3 && notOneAreaFilter)"
+            v-loading="!sections.loaded.top3">
             <div class="sub-section-header">
               <div class="sub-section-title">地区分布</div>
             </div>
             <div class="sub-section-content">
               <MarketAreaScatter
+                v-if="sections.projectScatter.dataAlready"
                 :chartData="sections.areaScatter.chartData"
               />
             </div>
           </div>
           <div class="top3-table-list pd-lr20">
-            <div class="ar-table" v-if="sections.areaScatter.projectCountTop3">
+            <div class="ar-table"
+              v-if="!sections.loaded.top3 || (sections.areaScatter.projectCountTop3 && sections.loaded.top3)"
+              v-loading="!sections.loaded.top3">
               <p class="ar-table-title">项目数量TOP3地区的重点中标单位</p>
-              <Top3Table :tableData="sections.areaScatter.projectCountTop3" />
+              <Top3Table v-if="sections.areaScatter.projectCountTop3" :tableData="sections.areaScatter.projectCountTop3" />
             </div>
-            <div class="ar-table" v-if="sections.areaScatter.projectAmountTop3">
+            <div class="ar-table"
+              v-if="!sections.loaded.top3 || (sections.areaScatter.projectAmountTop3 && sections.loaded.top3)"
+              v-loading="!sections.loaded.top3">
               <p class="ar-table-title">项目金额TOP3地区的重点中标单位</p>
-              <Top3Table :tableData="sections.areaScatter.projectAmountTop3" />
+              <Top3Table v-if="sections.areaScatter.projectAmountTop3" :tableData="sections.areaScatter.projectAmountTop3" />
             </div>
           </div>
           <!-- 客户分布 -->
-          <div class="sub-section user-scatter" v-if="sections.userScatter.list.length">
+          <div class="sub-section user-scatter"
+            v-if="!sections.loaded.top3 || (sections.userScatter.list.length && sections.loaded.top3)"
+            v-loading="!sections.loaded.top3">
             <div class="sub-section-header">
               <div class="sub-section-title">客户分布</div>
             </div>
             <div class="sub-section-content">
-              <MarketUserScatter :chartData="sections.userScatter.list" />
+              <MarketUserScatter v-if="sections.userScatter.list.length" :chartData="sections.userScatter.list" />
             </div>
           </div>
           <div class="top3-table-list pd-lr20">
-            <div class="ar-table" v-if="sections.userScatter.projectCountTop3">
+            <div class="ar-table"
+              v-if="!sections.loaded.top3 || (sections.userScatter.projectCountTop3 && sections.loaded.top3)"
+              v-loading="!sections.loaded.top3">
               <p class="ar-table-title">项目数量TOP3客户类型的重点中标单位</p>
-              <Top3Table :tableData="sections.userScatter.projectCountTop3" />
+              <Top3Table v-if="sections.userScatter.projectCountTop3" :tableData="sections.userScatter.projectCountTop3" />
             </div>
-            <div class="ar-table" v-if="sections.userScatter.projectAmountTop3">
+            <div class="ar-table"
+              v-if="!sections.loaded.top3 || (sections.userScatter.projectAmountTop3 && sections.loaded.top3)"
+              v-loading="!sections.loaded.top3">
               <p class="ar-table-title">项目金额TOP3客户类型的重点中标单位</p>
-              <Top3Table :tableData="sections.userScatter.projectAmountTop3" />
+              <Top3Table v-if="sections.userScatter.projectAmountTop3" :tableData="sections.userScatter.projectAmountTop3" />
             </div>
           </div>
           <!-- 细分市场 -->
-          <div class="sub-section market-refine" v-if="sections.market.refine.dataAlready">
+          <div class="sub-section market-refine"
+            v-if="!sections.loaded.segment || (sections.market.refine.dataAlready && sections.loaded.segment)"
+            v-loading="!sections.loaded.segment">
             <div class="sub-section-header">
               <div class="sub-section-title">细分市场</div>
             </div>
             <div class="sub-section-content">
               <MarketSegment
+                v-if="sections.market.refine.dataAlready"
                 :projectCountData="sections.market.refine.projectCountData"
                 :projectAmountData="sections.market.refine.projectAmountData"
               />
             </div>
           </div>
           <div class="top3-table-list pd-lr20">
-            <div class="ar-table" v-if="sections.market.refine.projectCountTop3">
+            <div class="ar-table"
+              v-if="!sections.loaded.segment || (sections.market.refine.projectCountTop3 && sections.loaded.segment)"
+              v-loading="!sections.loaded.segment">
               <p class="ar-table-title">细分市场的重点中标单位-项目数量</p>
-              <Top3Table :tableData="sections.market.refine.projectCountTop3" />
+              <Top3Table v-if="sections.market.refine.projectCountTop3" :tableData="sections.market.refine.projectCountTop3" />
             </div>
-            <div class="ar-table" v-if="sections.market.refine.projectAmountTop3">
+            <div class="ar-table"
+              v-if="!sections.loaded.segment || (sections.market.refine.projectAmountTop3 && sections.loaded.segment)"
+              v-loading="!sections.loaded.segment">
               <p class="ar-table-title">细分市场的重点中标单位-项目金额</p>
-              <Top3Table :tableData="sections.market.refine.projectAmountTop3" />
+              <Top3Table v-if="sections.market.refine.projectAmountTop3" :tableData="sections.market.refine.projectAmountTop3" />
             </div>
           </div>
         </div>
       </section>
       <div class="bg-grey-h24" v-if="buyerclassSectionShow"></div>
-      <section class="analysis-result-section" v-if="buyerclassSectionShow">
+      <section class="analysis-result-section"
+        v-if="!sections.loaded.buyerWinner || (buyerclassSectionShow && sections.loaded.buyerWinner)"
+        v-loading="!sections.loaded.buyerWinner">
         <div class="analysis-result-title pd-lr20">采购单位</div>
         <div class="analysis-result-content sub-section-list">
           <!-- 采购规模分布 -->
@@ -159,42 +184,44 @@
               <div class="sub-section-title">采购规模分布</div>
             </div>
             <div class="sub-section-content">
-              <BuyerScaleScatter :chartData="sections.buyerclass.chartData" />
+              <BuyerScaleScatter v-if="buyerclassSectionShow" :chartData="sections.buyerclass.chartData" />
             </div>
           </div>
           <div class="top3-table-list pd-lr20">
             <div class="ar-table buyerclass-count-top3" v-if="sections.buyerclass.projectCountTop3">
               <p class="ar-table-title">项目数量TOP3采购单位及其重点合作中标单位</p>
-              <Top3Table :tableData="sections.buyerclass.projectCountTop3" />
+              <Top3Table v-if="buyerclassSectionShow" :tableData="sections.buyerclass.projectCountTop3" />
             </div>
             <div class="ar-table buyerclass-amount-top3" v-if="sections.buyerclass.projectAmountTop3">
               <p class="ar-table-title">采购金额TOP3采购单位及其重点合作中标单位</p>
-              <Top3Table :tableData="sections.buyerclass.projectAmountTop3" />
+              <Top3Table v-if="buyerclassSectionShow" :tableData="sections.buyerclass.projectAmountTop3" />
             </div>
           </div>
         </div>
       </section>
       <div class="bg-grey-h24" v-if="winnerSectionShow"></div>
-      <section class="analysis-result-section" v-if="winnerSectionShow">
+      <section class="analysis-result-section"
+        v-if="!sections.loaded.buyerWinner || (winnerSectionShow && sections.loaded.buyerWinner)"
+        v-loading="!sections.loaded.buyerWinner">
         <div class="analysis-result-title pd-lr20">中标单位</div>
         <div class="analysis-result-content sub-section-list">
           <!-- 中标规模分布 -->
-          <div class="sub-section winner-scatter" v-if="sections.winner.dataAlready">
+          <div class="sub-section winner-scatter">
             <div class="sub-section-header">
               <div class="sub-section-title">中标规模分布</div>
             </div>
             <div class="sub-section-content">
-              <BidderScaleScatter :chartData="sections.winner.chartData" />
+              <BidderScaleScatter v-if="sections.winner.dataAlready" :chartData="sections.winner.chartData" />
             </div>
           </div>
           <div class="top3-table-list pd-lr20">
-            <div class="ar-table winner-count-top3" v-if="sections.winner.projectCountTop3">
+            <div class="ar-table winner-count-top3">
               <p class="ar-table-title">项目数量TOP3中标单位及其重点合作采购单位</p>
-              <Top3Table :tableData="sections.winner.projectCountTop3" />
+              <Top3Table v-if="sections.winner.projectCountTop3" :tableData="sections.winner.projectCountTop3" />
             </div>
-            <div class="ar-table winner-amount-top3" v-if="sections.winner.projectAmountTop3">
+            <div class="ar-table winner-amount-top3">
               <p class="ar-table-title">中标金额TOP3中标单位及其重点合作采购单位</p>
-              <Top3Table :tableData="sections.winner.projectAmountTop3" />
+              <Top3Table v-if="sections.winner.projectAmountTop3" :tableData="sections.winner.projectAmountTop3" />
             </div>
           </div>
         </div>
@@ -332,6 +359,13 @@ export default {
         ]
       },
       sections: {
+        loaded: {
+          overview: false, // 1, 市场概括与时间分布
+          top10: false, // 2, 项目规模Top10
+          top3: false, // 3, 项目规模分布/地区规模分布/客户分布/地区分布及客户分布&Top3(table+chart)
+          segment: false, // 4, 细分市场
+          buyerWinner: false // 5, 采购单位/中标单位&Top3(table+chart)
+        },
         market: {
           overview: [],
           refine: {
@@ -406,7 +440,7 @@ export default {
     }
   },
   computed: {
-    oneAreaFilter () {
+    notOneAreaFilter () {
       const area = this.reportFilters.area
       const showArea = area && (Object.keys(area).length > 1 || Object.keys(area).length === 0)
       return showArea
@@ -495,9 +529,11 @@ export default {
         }
         // 时间分布
         this.sortTimeScatter(data)
+        this.sections.loaded.overview = true
       } else if (flag === 2) {
         // 项目规模Top10
         this.sortProjectTop10(data.ProjectTop10)
+        this.sections.loaded.top10 = true
       } else if (flag === 3) {
         // 项目规模分布/地区规模分布/客户分布/地区分布及客户分布&Top3(table+chart)
         // 项目规模分布
@@ -508,14 +544,17 @@ export default {
         this.sortUserScatter(data.customer_scale)
         // 地区分布及客户分布Top3
         this.sortAreaUserTop3(data)
+        this.sections.loaded.top3 = true
       } else if (flag === 4) {
         // 细分市场
         this.sortMarketRefineData(data)
+        this.sections.loaded.segment = true
       } else if (flag === 5) {
         // 采购单位/中标单位&Top3(table+chart)
         this.sortBuyerclassData(data)
         // 中标单位分析
         this.sortWinnerData(data)
+        this.sections.loaded.buyerWinner = true
       }
     },
     formatSelectTime (value) {
@@ -1501,7 +1540,12 @@ export default {
 <style lang="scss">
 .report-dropdown-menu {
   border-color: $color-text--highlight;
+  min-width: 100px;
   .el-dropdown-menu__item {
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+    white-space: nowrap;
     &:hover {
       color: $color-text--highlight;
     }
@@ -1589,12 +1633,12 @@ export default {
   }
 }
 
-.pd-lr20 {
-  padding: 0 20px;
+.el-loading-parent--relative {
+  min-height: 300px;
 }
 
-.market-analysis-result {
-  padding: 20px 0;
+.pd-lr20 {
+  padding: 0 20px;
 }
 
 i.el-icon-caret-bottom {
@@ -1604,6 +1648,11 @@ i.el-icon-caret-bottom {
   }
 }
 
+.analysis-result-anchors {
+  padding: 20px;
+  border-radius: 4px;
+}
+
 .analysis-wrap {
   display: flex;
   align-items: center;
@@ -1619,12 +1668,14 @@ i.el-icon-caret-bottom {
     font-size: 12px;
     .limit-time {
       color: #1d1d1d;
+      font-size: 14px;
     }
   }
 }
 
 .analysis-result-section {
   position: relative;
+  border-radius: 4px;
   .analysis-result-title {
     position: relative;
     display: flex;
@@ -1682,7 +1733,11 @@ i.el-icon-caret-bottom {
   .dimensions-options {
     position: relative;
     padding: 4px 14px;
+    color: #1D1D1D;
     border: 1px solid #E0E0E0;
+    &:not(:last-of-type) {
+      border-right: none;
+    }
     &:hover,
     &.highlight {
       color: #fff;

src/views/analysisReport/components/MarketLineChart.vue

@@ -40,6 +40,40 @@ export default {
   },
   methods: {
     configOptions (options) {
+      // 面积颜色-渐变
+      Object.assign(options.series[0], {
+        areaStyle: {
+          normal: {
+            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(42, 190, 209, 0.12)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(42, 190, 209, 0)'
+              }
+            ], false)
+          }
+        }
+      })
+      Object.assign(options.series[1], {
+        areaStyle: {
+          normal: {
+            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: 'rgba(255, 159, 63, 0.12)'
+              },
+              {
+                offset: 1,
+                color: 'rgba(255, 159, 63, 0)'
+              }
+            ], false)
+          }
+        }
+      })
+
       options.tooltip.formatter = params => {
         let tip = `<div style="padding-top:2px;color:#9B9CA3;">${params[0].name}</div>`
         for (let i = 0; i < params.length; i++) {

src/views/analysisReport/components/MarketOverview.vue

@@ -8,11 +8,11 @@
         <div class="o-item-count">{{ item.count }}</div>
         <div
           class="o-item-percent flex-r-c center"
+          v-show="overviewRateTotal"
           :class="{
             'color-red': item.ringRatio > 0,
             'icon-reverse color-green': item.ringRatio < 0,
-          }"
-        >
+          }">
           <span class="o-item-percent-text">环比：{{ item.ringRatio ? (Math.abs(item.ringRatio) + '%') : '-' }}</span>
           <span class="el-icon-top" v-if="item.ringRatio"></span>
         </div>
@@ -67,6 +67,17 @@ export default {
         ]
       }
     }
+  },
+  computed: {
+    overviewRateTotal () {
+      var total = 0
+      this.overviewList.forEach(function (item) {
+        if (item.ringRatio !== undefined && item.ringRatio !== null) {
+          total += item.ringRatio
+        }
+      })
+      return total
+    }
   }
 }
 </script>

src/views/analysisReport/components/ProjectScatter.vue

@@ -69,9 +69,7 @@
           label="成交时间">
         </el-table-column>
         <el-table-column
-          align="center"
           header-align="center"
-          prop=""
           class-name="cursor"
           label="中标单位">
           <template slot-scope="scope">