feat:定制化分析报告加遮罩

src/views/analysisReport/MarketAnalysisResult.vue

@@ -44,7 +44,7 @@
         <div class="analysis-result-title pd-lr20">市场规模</div>
         <div class="analysis-result-content sub-section-list">
           <!-- 市场概况 -->
-          <div class="sub-section market-overview" v-if="sections.market.overview.length">
+          <div class="sub-section market-overview" v-if="(sections.market.overview.length && isConf10)">
             <div class="sub-section-header">
               <div class="sub-section-title">市场概况</div>
             </div>
@@ -52,9 +52,10 @@
               <MarketOverview :overviewList="sections.market.overview" />
             </div>
           </div>
+          <MaskCard v-if="!isConf10" @click="openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[0]])" :k="Object.keys(vipUpgradeMap)[0]" :item="vipUpgradeMap[Object.keys(vipUpgradeMap)[0]]"></MaskCard>
           <!-- 项目规模分布 -->
           <div class="sub-section project-scatter"
-            v-if="!sections.loaded.top3 || (sections.projectScatter.dataAlready && sections.loaded.top3)"
+            v-if="(isConf10 && !sections.loaded.top3) || (sections.projectScatter.dataAlready && sections.loaded.top3 && isConf10)"
             v-loading="!sections.loaded.top3">
             <div class="sub-section-header">
               <div class="sub-section-title">项目规模分布</div>
@@ -67,6 +68,7 @@
               />
             </div>
           </div>
+          <MaskCard v-if="!isConf10" @click="openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[1]])" :k="Object.keys(vipUpgradeMap)[1]" :item="vipUpgradeMap[Object.keys(vipUpgradeMap)[1]]"></MaskCard>
           <!-- 时间分布 -->
           <div class="sub-section time-scatter" v-if="sections.timeScatter.dataAlready">
             <div class="sub-section-header">
@@ -90,7 +92,7 @@
           </div>
           <!-- 地区分布 -->
           <div class="sub-section area-scatter"
-            v-if="(!sections.loaded.top3 && notOneAreaFilter) || (sections.areaScatter.dataAlready && sections.loaded.top3 && notOneAreaFilter)"
+            v-if="(!sections.loaded.top3 && notOneAreaFilter && isConf10) || (sections.areaScatter.dataAlready && sections.loaded.top3 && notOneAreaFilter && isConf10)"
             v-loading="!sections.loaded.top3">
             <div class="sub-section-header">
               <div class="sub-section-title">地区分布</div>
@@ -104,7 +106,7 @@
           </div>
           <div class="top3-table-list pd-lr20">
             <div class="ar-table"
-              v-if="!sections.loaded.top3 || (sections.areaScatter.projectCountTop3 && sections.loaded.top3)"
+              v-if="(!sections.loaded.top3 && isConf10) || (sections.areaScatter.projectCountTop3 && sections.loaded.top3 && isConf10)"
               v-loading="!sections.loaded.top3">
               <p class="ar-table-title">项目数量TOP3地区的重点中标单位</p>
               <Top3Table v-if="sections.areaScatter.projectCountTop3" :tableData="sections.areaScatter.projectCountTop3" />
@@ -116,6 +118,7 @@
               <Top3Table v-if="sections.areaScatter.projectAmountTop3" :tableData="sections.areaScatter.projectAmountTop3" />
             </div>
           </div>
+          <MaskCard v-if="!isConf10" @click="openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[2]])" :k="Object.keys(vipUpgradeMap)[2]" :item="vipUpgradeMap[Object.keys(vipUpgradeMap)[2]]"></MaskCard>
           <!-- 客户分布 -->
           <div class="sub-section user-scatter"
             v-if="!sections.loaded.top3 || (sections.userScatter.list.length && sections.loaded.top3)"
@@ -143,7 +146,7 @@
           </div>
           <!-- 细分市场 -->
           <div class="sub-section market-refine"
-            v-if="!sections.loaded.segment || (sections.market.refine.dataAlready && sections.loaded.segment)"
+            v-if="(isConf10 && !sections.loaded.segment) || (sections.market.refine.dataAlready && sections.loaded.segment && isConf10)"
             v-loading="!sections.loaded.segment">
             <div class="sub-section-header">
               <div class="sub-section-title">细分市场</div>
@@ -156,9 +159,9 @@
               />
             </div>
           </div>
-          <div class="top3-table-list pd-lr20">
+          <div class="top3-table-list pd-lr20" v-if="isConf10">
             <div class="ar-table"
-              v-if="!sections.loaded.segment || (sections.market.refine.projectCountTop3 && sections.loaded.segment)"
+              v-if="(!sections.loaded.segment) || (sections.market.refine.projectCountTop3 && sections.loaded.segment)"
               v-loading="!sections.loaded.segment">
               <p class="ar-table-title">细分市场的重点中标单位-项目数量</p>
               <Top3Table v-if="sections.market.refine.projectCountTop3" :tableData="sections.market.refine.projectCountTop3" />
@@ -170,6 +173,7 @@
               <Top3Table v-if="sections.market.refine.projectAmountTop3" :tableData="sections.market.refine.projectAmountTop3" />
             </div>
           </div>
+          <MaskCard v-if="!isConf10" @click="openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[3]])" :k="Object.keys(vipUpgradeMap)[3]" :item="vipUpgradeMap[Object.keys(vipUpgradeMap)[3]]"></MaskCard>
         </div>
       </section>
       <div class="bg-grey-h24" v-if="!sections.loaded.buyerWinner || buyerclassSectionShow"></div>
@@ -188,14 +192,16 @@
             </div>
           </div>
           <div class="top3-table-list pd-lr20">
-            <div class="ar-table buyerclass-count-top3" v-if="sections.buyerclass.projectCountTop3">
+            <div class="ar-table buyerclass-count-top3" v-if="(sections.buyerclass.projectCountTop3 && isConf10)">
               <p class="ar-table-title">项目数量TOP3采购单位及其重点合作中标单位</p>
               <Top3Table v-if="buyerclassSectionShow" :tableData="sections.buyerclass.projectCountTop3" />
             </div>
-            <div class="ar-table buyerclass-amount-top3" v-if="sections.buyerclass.projectAmountTop3">
+            <MaskCard v-if="!isConf10" @click="openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[4]])" :k="Object.keys(vipUpgradeMap)[4]" :item="vipUpgradeMap[Object.keys(vipUpgradeMap)[4]]"></MaskCard>
+            <div class="ar-table buyerclass-amount-top3" v-if="(sections.buyerclass.projectAmountTop3 && isConf10)">
               <p class="ar-table-title">采购金额TOP3采购单位及其重点合作中标单位</p>
               <Top3Table v-if="buyerclassSectionShow" :tableData="sections.buyerclass.projectAmountTop3" />
             </div>
+            <MaskCard v-if="!isConf10" @click="openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[5]])" :k="Object.keys(vipUpgradeMap)[5]" :item="vipUpgradeMap[Object.keys(vipUpgradeMap)[5]]"></MaskCard>
           </div>
         </div>
       </section>
@@ -215,14 +221,16 @@
             </div>
           </div>
           <div class="top3-table-list pd-lr20">
-            <div class="ar-table winner-count-top3">
+            <div class="ar-table winner-count-top3" v-if="isConf10">
               <p class="ar-table-title">项目数量TOP3中标单位及其重点合作采购单位</p>
               <Top3Table v-if="sections.winner.projectCountTop3" :tableData="sections.winner.projectCountTop3" />
             </div>
-            <div class="ar-table winner-amount-top3">
+            <MaskCard v-if="!isConf10" @click="openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[6]])" k="项目数量TOP3" :item="vipUpgradeMap[Object.keys(vipUpgradeMap)[6]]"></MaskCard>
+            <div class="ar-table winner-amount-top3" v-if="isConf10">
               <p class="ar-table-title">中标金额TOP3中标单位及其重点合作采购单位</p>
               <Top3Table v-if="sections.winner.projectAmountTop3" :tableData="sections.winner.projectAmountTop3" />
             </div>
+            <MaskCard v-if="!isConf10" @click="openBigPage(vipUpgradeMap[Object.keys(vipUpgradeMap)[7]])" k="项目金额TOP3" :item="vipUpgradeMap[Object.keys(vipUpgradeMap)[7]]"></MaskCard>
           </div>
         </div>
       </section>
@@ -240,10 +248,14 @@ import MarketSegment from '@/views/analysisReport/components/MarketSegment.vue'
 import BuyerScaleScatter from '@/views/analysisReport/components/BuyerScaleScatter.vue'
 import BidderScaleScatter from '@/views/analysisReport/components/BidderScaleScatter.vue'
 import Top3Table from '@/views/analysisReport/components/MarketTop3Table'
+import MaskCard from '@/components/mask-card/MaskCard.vue'
 import MarketUserScatter from '@/views/analysisReport/components/MarketUserScatter'
 import { getReportAnalysisInfo } from '@/api/modules/'
+import { mapState } from 'vuex'
 import { moneyUnit, dateFormatter, formatPrice } from '@/utils/globalFunctions'
-
+function getImgForVipUpgrade (name, bg = false, suffix = '.png') {
+  return require('@/assets/images/vip/' + (bg ? 'bg/mask/' : '') + name + suffix)
+}
 export default {
   name: 'analysis-report-result',
   components: {
@@ -259,6 +271,7 @@ export default {
     BuyerScaleScatter,
     BidderScaleScatter,
     Top3Table,
+    MaskCard,
     MarketUserScatter
   },
   props: {
@@ -446,10 +459,96 @@ export default {
           // 项目金额Top3
           projectAmountTop3: null
         }
+      },
+      vipUpgradeMap: {
+        市场概况: {
+          title: '开通大会员',
+          button: '去开通',
+          subtitle: '通过招标大数据综合分析项目体量、采购单位和中标单位数量，全面掌握市场趋势！',
+          source: 'ent_portrait_yearData',
+          img: getImgForVipUpgrade('2'),
+          bg: getImgForVipUpgrade('03', true)
+        },
+        项目规模分布: {
+          title: '开通大会员',
+          button: '去开通',
+          subtitle: '从项目总金额、项目总数等多维度分析，了解市场需求状况，全面挖掘更多潜在商机！',
+          source: 'ent_portrait_monthData',
+          img: getImgForVipUpgrade('3'),
+          bg: getImgForVipUpgrade('04', true)
+        },
+        地区分布: {
+          title: '开通大会员',
+          button: '去开通',
+          subtitle: '根据项目数量、中标金额统计市场热度高的区域，为企业市场战略布局提供可靠的数据支持。',
+          source: 'ent_portrait_areaData',
+          img: getImgForVipUpgrade('4'),
+          bg: getImgForVipUpgrade('05', true)
+        },
+        细分市场: {
+          title: '开通大会员',
+          button: '去开通',
+          subtitle: '通过市场细分，企业可以综合选择适合的目标市场，有利于挖掘市场机会，开拓新市场！',
+          source: 'ent_portrait_discountRate',
+          img: getImgForVipUpgrade('5'),
+          bg: getImgForVipUpgrade('06', true)
+        },
+        // 采购单位
+        项目数量TOP3: {
+          title: '开通大会员',
+          button: '去开通',
+          subtitle: '直观了解优质采购单位名单，分析采购单位与供应商关系远近，辅助市场决策！',
+          source: 'ent_portrait_top10',
+          img: getImgForVipUpgrade('6'),
+          bg: getImgForVipUpgrade('07', true)
+        },
+        项目金额TOP3: {
+          title: '开通大会员',
+          button: '去开通',
+          subtitle: '透过采购单位项目采购金额排名，重点合作单位采购占比，帮助供应商挖掘市场机会！',
+          source: 'ent_portrait_topShow',
+          img: getImgForVipUpgrade('7'),
+          bg: getImgForVipUpgrade('08', true)
+        },
+        // 中标单位
+        // 项目数量TOP3
+        项目数量: {
+          title: '开通大会员',
+          button: '去开通',
+          subtitle: '直观了解优质采购单位名单，分析采购单位与供应商关系远近，辅助市场决策！',
+          source: 'ent_portrait_top10',
+          img: getImgForVipUpgrade('6'),
+          bg: getImgForVipUpgrade('07', true)
+        },
+        // 项目金额TOP3
+        项目金额: {
+          title: '开通大会员',
+          button: '去开通',
+          subtitle: '透过采购单位项目采购金额排名，重点合作单位采购占比，帮助供应商挖掘市场机会！',
+          source: 'ent_portrait_topShow',
+          img: getImgForVipUpgrade('7'),
+          bg: getImgForVipUpgrade('08', true)
+        }
       }
     }
   },
   computed: {
+    ...mapState({
+      info: state => state.user.info
+    }),
+    isConf10 () {
+      return this.info.power.indexOf(10) !== -1
+    },
+    getVipUpgradeMap () {
+      const tempMap = this.vipUpgradeMap
+      Object.keys(tempMap).forEach(v => {
+        const tempTitle = '开通大会员'
+        const tempButton = !this.isConf10 ? '联系客服' : '免费体验'
+        tempMap[v].title = tempTitle
+        tempMap[v].button = tempButton
+      })
+      return tempMap
+    },
     notOneAreaFilter () {
       const area = this.reportFilters.area
       const showArea = area && (Object.keys(area).length > 1 || Object.keys(area).length === 0)
@@ -1555,6 +1654,17 @@ export default {
         unit,
         count
       }
+    },
+    openBigPage (item) {
+      try {
+        // eslint-disable-next-line no-undef
+        _hmt.push(['_trackEvent', '超级订阅-pc', 'click', '企业情报历史记录-去开通'])
+      } catch (e) {
+        console.log('未初始化百度统计')
+      }
+      if (item.button && item.button === '联系客服') {
+        this.contactCustomer(this)
+      }
     }
   }
 }