feat: 周报月报相关修改

src/api/modules/chart.js

@@ -231,3 +231,12 @@ export function vipBuyerHistoryContact (data) {
     data
   })
 }
+
+// 周报月报项目明细
+export function getWeekMonthReportProjectList (data) {
+  return request({
+    url: '/report/projectInfo',
+    method: 'post',
+    data
+  })
+}

src/api/modules/forecast.js

@@ -51,6 +51,16 @@ export function getBidAssociation (data) {
   })
 }
 
+// 采购单位联想接口
+export function getBuyerAssociation (data) {
+  data = qs.stringify(data)
+  return request({
+    url: '/search/buyer/association',
+    method: 'post',
+    data
+  })
+}
+
 // 筛选条件数据接口
 export function getBidProjectInfo (data) {
   data = qs.stringify(data)

src/components/chart/DuoToneChart.vue

@@ -1,35 +1,77 @@
 <template>
   <div class="progess-chart">
-    <div class="client-list">
-      <div class="progress-bar-container">
-        <div class="progress-bar-item" v-for="(item,index) in datas" :key="index">
-          <div class="item-label">
-            <span class="item-name">{{item.name}}</span>
-            <span class="item-count text-right">{{item.value}}</span>
-          </div>
-          <div class="item-progress">
-            <span class="item-progress-count" :class="index > 2 || single ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
-          </div>
+    <div class="progress-bar-container">
+      <div class="progress-bar-item" v-for="(item,index) in list" :key="index">
+        <div class="item-label">
+          <span class="item-name" :class="{ 'link-text': titleClickable }" @click="clickTitle(item)">{{item.name}}</span>
+          <span class="item-count text-right">{{item.value}}</span>
+        </div>
+        <div class="item-progress">
+          <span class="item-progress-count" :class="index > 2 || single ? 'blue-progress' : 'yellow-progress'" :style="{width: item.parent}"></span>
         </div>
       </div>
     </div>
+    <div class="progress-chart-footer">
+      <button class="see-more-button" v-if="showSeeMoreButton" @click="seeMore">查看更多</button>
+    </div>
   </div>
 </template>
 <script>
 export default {
   name: 'progess-chart',
-  props: ['datas', 'single'],
+  props: {
+    datas: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    single: {
+      type: Boolean,
+      default: false
+    },
+    // 是否默认只展示前几个
+    defaultOnlyShowSome: {
+      type: Boolean,
+      default: false
+    },
+    titleClickable: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
-    return {}
+    return {
+      showAllControl: false
+    }
+  },
+  computed: {
+    showAll () {
+      return !this.defaultOnlyShowSome || this.showAllControl
+    },
+    showSeeMoreButton () {
+      return this.datas.length > 5 && !this.showAll
+    },
+    list () {
+      if (this.showAll) {
+        return this.datas
+      } else {
+        return this.datas.slice(0, 5)
+      }
+    }
   },
-  computed: {},
-  watch: {},
-  mounted () {},
-  methods: {}
+  methods: {
+    seeMore () {
+      this.showAllControl = true
+    },
+    clickTitle (item) {
+      this.$emit('clickTitle', item)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
-.client-list{
+.progess-chart{
   background-color: #fff;
   .c-thead{
     display: flex;
@@ -70,7 +112,10 @@ export default {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-    padding: 8px 0 16px;
+    padding: 8px 0;
+    &:not(:last-of-type) {
+      margin-bottom: 8px;
+    }
   }
   .item-label {
     display: flex;
@@ -81,6 +126,13 @@ export default {
   }
   .item-name {
     color: #171826;
+    &.link-text {
+      cursor: pointer;
+      color: $color_main;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
   }
   .item-count {
     font-size: 12px;
@@ -124,4 +176,14 @@ export default {
     background: linear-gradient(to right,#8DE0EB, #2ABED1);
   }
 }
+.progress-chart-footer {
+  text-align: center;
+}
+.see-more-button {
+  padding: 12px 30px;
+  font-size: 14px;
+  line-height: 22px;
+  background-color: #fff;
+  color: #2ABED1;
+}
 </style>

src/components/report-data/CompanyDetail.vue

@@ -19,11 +19,13 @@
             </div>
             <div class='pro_main_list'>
               <div class='item_label'>项目名称</div>
-              <div class='item_content'>{{ item.projectname }}</div>
+              <el-link class='item_content' v-if="linkable && item.sourceinfoid" :underline="false" @click="toProjectDetail(item.sourceinfoid)">{{ item.projectname || '--' }}</el-link>
+              <div class='item_content' v-else>{{ item.projectname }}</div>
             </div>
             <div class='pro_main_list'>
               <div class='item_label'>采购单位</div>
-              <div class='item_content'>{{ item.buyer || '--'}}</div>
+              <el-link class='item_content' v-if="linkable && item.buyer" :underline="false" @click="toOtherPage(item.buyer, 'buyer')">{{ item.buyer || '--' }}</el-link>
+              <div class='item_content' v-else>{{ item.buyer || '--'}}</div>
             </div>
             <div class='pro_main_list'>
               <div class='item_label'>项目预算(万)</div>
@@ -37,7 +39,8 @@
           <div class='pro_main'>
             <div class='pro_main_list'>
               <div class='item_label'>项目名称</div>
-              <div class='item_content'>{{ item.projectname }}</div>
+              <el-link class='item_content' v-if="linkable && item.projectId" :underline="false" @click="toProjectDetail(item.projectId)">{{ item.projectname || '--' }}</el-link>
+              <div class='item_content' v-else>{{ item.projectname }}</div>
             </div>
             <div class='pro_main_list'>
               <div class='item_label'>项目状态</div>
@@ -45,7 +48,8 @@
             </div>
             <div class='pro_main_list'>
               <div class='item_label'>采购单位</div>
-              <div class='item_content'>{{ item.buyer || '--'}}</div>
+              <el-link v-if="linkable && item.buyer" class='item_content' :underline="false" @click="toOtherPage(item.buyer, 'buyer')">{{ item.buyer || '--' }}</el-link>
+              <div class='item_content' v-else>{{ item.buyer || '--'}}</div>
             </div>
             <div class='pro_main_list'>
               <div class='item_label'>项目预算(万)</div>
@@ -59,7 +63,8 @@
           <div class='pro_main'>
             <div class='pro_main_list'>
               <div class='item_label'>企业名称</div>
-              <div class='item_content'>{{ item.entname }}</div>
+              <el-link class='item_content' v-if="linkable && item.winner_id" :underline="false" @click="toOtherPage(item.winner_id, 'winner')">{{ item.entname || '--' }}</el-link>
+              <div class='item_content' v-else>{{ item.entname }}</div>
             </div>
             <div class='pro_main_list'>
               <div class='item_label'>注册省市</div>
@@ -67,7 +72,8 @@
             </div>
             <div class='pro_main_list'>
               <div class='item_label'>中标项目</div>
-              <div class='item_content'>{{ item.projectname || '--'}}</div>
+              <el-link class='item_content' v-if="linkable && item.projectId" :underline="false" @click="toProjectDetail(item.projectId)">{{ item.projectname || '--' }}</el-link>
+               <div class='item_content' v-else>{{ item.projectname || '--'}}</div>
             </div>
             <div class='pro_main_list'>
               <div class='item_label'>中标日期</div>
@@ -85,24 +91,64 @@
 </template>
 
 <script>
+import { Link } from 'element-ui'
 import { dateFormatter } from '@/utils'
 export default {
-  props: ['title', 'datas', 'type'],
-  data () {
-    return {}
+  components: {
+    [Link.name]: Link
   },
-  mounted () {
-    console.log(this.datas)
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'bidopen',
+      validator (value) {
+        return ['bidopen', 'project', 'ent'].includes(value)
+      }
+    },
+    linkable: {
+      type: Boolean,
+      default: false
+    },
+    datas: {
+      type: Object,
+      default () {
+        return {
+          // nextweek_bidopen: [],
+          // follow_project: [],
+          // follow_ent: [],
+        }
+      }
+    }
   },
   methods: {
-    dateFormatter
+    dateFormatter,
+    toProjectDetail (id) {
+      if (id) {
+        window.open(`/swordfish/page_big_pc/pro_follow_detail?sid=${id}`)
+      }
+    },
+    toOtherPage (id, type) {
+      let goLink = ''
+      if (type === 'winner') {
+        goLink = `/ent_portrait/${id}`
+      } else if (type === 'buyer') {
+        goLink = `/unit_portrayal/${id}`
+      }
+      if (id && goLink) {
+        window.open(`/swordfish/page_big_pc${goLink}`)
+      }
+    }
   }
 }
 </script>
 
 <style lang='scss' scoped>
 .nextWeekOpen {
-  padding: 32px 40px;
+  padding: 32px 0;
   background: #ffffff;
   .next_open_head {
     font-size: 18px;
@@ -130,34 +176,35 @@ export default {
       opacity: 1;
       border: 1px solid #ececec;
       border-radius: 5px;
-      .pro_main {
-        display: flex;
-        flex-direction: column;
-        .pro_main_list {
-          display: flex;
-          margin-bottom: 8px;
-        }
-        .item_label {
-          width: 80px;
-          height: 20px;
-          font-size: 13px;
-          font-weight: 400;
-          text-align: LEFT;
-          color: #686868;
-          line-height: 20px;
-        }
-        .item_content {
-          flex: 1;
-          margin-left: 8px;
-          min-height: 20px;
-          font-size: 13px;
-          font-weight: 400;
-          text-align: LEFT;
-          color: #1d1d1d;
-          line-height: 20px;
-        }
-      }
     }
   }
 }
+
+.pro_main {
+  display: flex;
+  flex-direction: column;
+  .pro_main_list {
+    display: flex;
+    margin-bottom: 8px;
+  }
+  .item_label {
+    width: 80px;
+    height: 20px;
+    font-size: 13px;
+    font-weight: 400;
+    text-align: LEFT;
+    color: #686868;
+    line-height: 20px;
+  }
+  .item_content {
+    flex: 1;
+    margin-left: 8px;
+    min-height: 20px;
+    font-size: 13px;
+    font-weight: 400;
+    justify-content: flex-start;
+    color: #1d1d1d;
+    line-height: 20px;
+  }
+}
 </style>

src/views/reportData/pageMonth.vue

@@ -27,98 +27,132 @@
             </div>
           </div>
         </div>
-        <div class="echartsView" v-if="isFinish">
-          <!-- 项目数量 -->
-          <div class="chart" v-if="pCount.show">
-            <div class="chart_title">项目数量</div>
-            <BarLineChart :datas="pCount.data" :options="pCount.options"></BarLineChart>
-          </div>
-          <!-- 项目规模 -->
-          <div class="chart" v-if="pScale.show">
-            <div class="chart_title">项目规模</div>
-            <BarLineChart :datas="pScale.data" :options="pScale.options"></BarLineChart>
-          </div>
-          <!-- 本月项目数量 -->
-          <div class="chart" v-if="curMonthCount.show">
-            <div class="chart_title">本月项目数量</div>
-            <DuoToneChart :datas="curMonthCount.data"></DuoToneChart>
-          </div>
-          <!-- 本月项目规模 -->
-          <div class="chart" v-if="curMonthScale.show">
-            <div class="chart_title">本月项目规模</div>
-            <BarLineChart :datas="curMonthScale.data" :options="curMonthScale.options"></BarLineChart>
-          </div>
-          <!-- 本月项目数量分布 -->
-          <div class="chart" v-if="curMonthCountArea.show">
-            <div class="chart_title">本月项目数量分布</div>
-            <MapChart :datas="curMonthCountArea.data" :options="curMonthCountArea.options"></MapChart>
-          </div>
-          <!-- 本月项目规模分布 -->
-          <div class="chart" v-if="curMonthScaleArea.show">
-            <div class="chart_title">本月项目规模分布</div>
-            <MapChart :datas="curMonthScaleArea.data" :options="curMonthScaleArea.options"></MapChart>
-          </div>
-          <!-- 本月项目数量采购行业排行榜 7-->
-          <div class="chart" v-if="countTop.show">
-            <div class="chart_title">
-              <div>
-                <div>本月项目数量采购行业排行榜</div>
-                <div class="notice">注：采购行业为“其它”不参与排名</div>
+        <el-tabs class="tabs sticky-tab-container" v-model="tabActiveName" v-if="isFinish">
+          <el-tab-pane label="本月分析" name="1">
+            <div class="echartsView" >
+              <!-- 项目数量 -->
+              <div class="chart" v-if="pCount.show">
+                <div class="chart_title">项目数量</div>
+                <BarLineChart :datas="pCount.data" :options="pCount.options"></BarLineChart>
               </div>
-              <div class="more-btn" v-if="countTop.originData.length > 10" @click="viewMoreRanking('countTop')">查看全部</div>
-            </div>
-            <DuoToneChart :datas="countTop.data"></DuoToneChart>
-          </div>
-          <!-- 本月项目规模采购行业排行榜 8-->
-          <div class="chart" v-if="scaleTop.show">
-            <div class="chart_title">
-              <div>
-                <div>本月项目规模采购行业排行榜</div>
-                <div class="notice">注：采购行业为“其它”不参与排名</div>
+              <!-- 项目规模 -->
+              <div class="chart" v-if="pScale.show">
+                <div class="chart_title">项目规模</div>
+                <BarLineChart :datas="pScale.data" :options="pScale.options"></BarLineChart>
               </div>
-              <div class="more-btn" v-if="scaleTop.originData.length > 10"  @click="viewMoreRanking('scaleTop')">查看全部</div>
-            </div>
-            <DuoToneChart :datas="scaleTop.data"></DuoToneChart>
-          </div>
-          <!-- 本月项目平均规模采购行业排行榜 9-->
-          <div class="chart" v-if="averageTop.show">
-            <div class="chart_title">
-              <div>
-                <div>本月项目平均规模采购行业排行榜</div>
-                <div class="notice">注：采购行业为“其它”不参与排名</div>
+              <!-- 本月项目数量 -->
+              <div class="chart" v-if="curMonthCount.show">
+                <div class="chart_title">本月项目数量</div>
+                <DuoToneChart :datas="curMonthCount.data"></DuoToneChart>
               </div>
-              <div class="more-btn" v-if="averageTop.originData.length > 10" @click="viewMoreRanking('averageTop')">查看全部</div></div>
-            <DuoToneChart :datas="averageTop.data"></DuoToneChart>
-          </div>
-          <!-- 本月中标企业注册地分布 10-->
-          <div class="chart" v-if="curMonthRegArea.show">
-            <div class="chart_title">本月中标企业注册地分布</div>
-            <MapChart :datas="curMonthRegArea.data" :options="curMonthRegArea.options"></MapChart>
-          </div>
-          <!-- 本月中标企业注册资本分布 11-->
-          <div class="chart" v-if="capitalTop.show">
-            <div class="chart_title">本月中标企业注册资本分布</div>
-            <DuoToneChart :datas="capitalTop.data" :single="true"></DuoToneChart>
-          </div>
-          <!-- 本月中标企业中标项目数量分布 12-->
-          <div class="chart" v-if="curMonthBidCount.show">
-            <div class="chart_title">本月中标企业中标项目数量分布</div>
-            <BarLineChart :datas="curMonthBidCount.data" :options="curMonthBidCount.options"></BarLineChart>
-          </div>
-          <!-- 本月采购单位排行榜 13-->
-          <div class="chart" v-if="unitTop.show">
-            <div class="chart_title">本月采购单位排行榜</div>
-            <DuoToneChart :datas="unitTop.data"></DuoToneChart>
-          </div>
-          <!-- 本月中标企业排行榜 14 -->
-          <div class="chart" v-if="bidEntTop.show">
-            <ProjectTop type="winner" title="本月中标企业排行榜" :data="bidEntTop.data"></ProjectTop>
-          </div>
-          <!-- 本月项目规模排行榜 15 -->
-          <div class="chart" v-if="curScaleTop.show">
-            <ProjectTop type="bidamount" title="本月项目规模排行榜" :data="curScaleTop.data"></ProjectTop>
-          </div>
-        </div>
+              <!-- 本月项目规模 -->
+              <div class="chart" v-if="curMonthScale.show">
+                <div class="chart_title">本月项目规模</div>
+                <BarLineChart :datas="curMonthScale.data" :options="curMonthScale.options"></BarLineChart>
+              </div>
+              <!-- 本月项目数量分布 -->
+              <div class="chart" v-if="curMonthCountArea.show">
+                <div class="chart_title">本月项目数量分布</div>
+                <MapChart :datas="curMonthCountArea.data" :options="curMonthCountArea.options"></MapChart>
+              </div>
+              <!-- 本月项目规模分布 -->
+              <div class="chart" v-if="curMonthScaleArea.show">
+                <div class="chart_title">本月项目规模分布</div>
+                <MapChart :datas="curMonthScaleArea.data" :options="curMonthScaleArea.options"></MapChart>
+              </div>
+              <!-- 本月项目数量采购行业排行榜 7-->
+              <div class="chart" v-if="countTop.show">
+                <div class="chart_title">
+                  <div>
+                    <div>本月项目数量采购行业排行榜</div>
+                    <div class="notice">注：采购行业为“其它”不参与排名</div>
+                  </div>
+                  <div class="more-btn" v-if="countTop.originData.length > 10" @click="viewMoreRanking('countTop')">查看全部</div>
+                </div>
+                <DuoToneChart :datas="countTop.data"></DuoToneChart>
+              </div>
+              <!-- 本月项目规模采购行业排行榜 8-->
+              <div class="chart" v-if="scaleTop.show">
+                <div class="chart_title">
+                  <div>
+                    <div>本月项目规模采购行业排行榜</div>
+                    <div class="notice">注：采购行业为“其它”不参与排名</div>
+                  </div>
+                  <div class="more-btn" v-if="scaleTop.originData.length > 10"  @click="viewMoreRanking('scaleTop')">查看全部</div>
+                </div>
+                <DuoToneChart :datas="scaleTop.data"></DuoToneChart>
+              </div>
+              <!-- 本月项目平均规模采购行业排行榜 9-->
+              <div class="chart" v-if="averageTop.show">
+                <div class="chart_title">
+                  <div>
+                    <div>本月项目平均规模采购行业排行榜</div>
+                    <div class="notice">注：采购行业为“其它”不参与排名</div>
+                  </div>
+                  <div class="more-btn" v-if="averageTop.originData.length > 10" @click="viewMoreRanking('averageTop')">查看全部</div></div>
+                <DuoToneChart :datas="averageTop.data"></DuoToneChart>
+              </div>
+              <!-- 本月中标企业注册地分布 10-->
+              <div class="chart" v-if="curMonthRegArea.show">
+                <div class="chart_title">本月中标企业注册地分布</div>
+                <MapChart :datas="curMonthRegArea.data" :options="curMonthRegArea.options"></MapChart>
+              </div>
+              <!-- 本月中标企业注册资本分布 11-->
+              <div class="chart" v-if="capitalTop.show">
+                <div class="chart_title">本月中标企业注册资本分布</div>
+                <DuoToneChart :datas="capitalTop.data" :single="true"></DuoToneChart>
+              </div>
+              <!-- 本月中标企业中标项目数量分布 12-->
+              <div class="chart" v-if="curMonthBidCount.show">
+                <div class="chart_title">本月中标企业中标项目数量分布</div>
+                <BarLineChart :datas="curMonthBidCount.data" :options="curMonthBidCount.options"></BarLineChart>
+              </div>
+              <!-- 本月采购单位排行榜/ 13-->
+              <div class="chart" v-if="unitTop.show">
+                <template v-if="useNewVersionReport">
+                  <div class="chart_title">本月采购单位排行榜TOP30</div>
+                  <DuoToneChart
+                    :datas="unitTop.data"
+                    @clickTitle="buyerTitleClick"
+                    :defaultOnlyShowSome="useNewVersionReport"
+                    :titleClickable="useNewVersionReport"></DuoToneChart>
+                </template>
+                <template v-else>
+                  <div class="chart_title">本月采购单位排行榜</div>
+                  <DuoToneChart :datas="unitTop.data"></DuoToneChart>
+                </template>
+              </div>
+              <!-- 本月中标企业排行榜 14 -->
+              <div class="chart" v-if="bidEntTop.show">
+                <template v-if="useNewVersionReport">
+                  <div class="chart_title">本月中标企业排行榜TOP30</div>
+                  <DuoToneChart
+                    :datas="bidEntTop.data"
+                    @clickTitle="winnerTitleClick"
+                    :defaultOnlyShowSome="useNewVersionReport"
+                    :titleClickable="useNewVersionReport"
+                    ></DuoToneChart>
+                </template>
+                <ProjectTop v-else type="winner" title="本月中标企业排行榜" :data="bidEntTop.data"></ProjectTop>
+              </div>
+              <!-- 本月项目规模排行榜 15 -->
+              <div class="chart" v-if="curScaleTop.show">
+                <ProjectTopTable v-if="useNewVersionReport" title="本月项目规模排行榜TOP30" type="bidamount" :data="curScaleTop.data"></ProjectTopTable>
+                <ProjectTop v-else title="本月项目规模排行榜" type="bidamount" :data="curScaleTop.data"></ProjectTop>
+              </div>
+            </div>
+          </el-tab-pane>
+          <el-tab-pane lazy label="本月项目明细" name="2" v-if="useNewVersionReport">
+            <ProjectDetailsList
+              :start="start - 0"
+              :end="end - 0"
+              reportType="month"
+              :subscribeClassList="projectDetailFilters.keywordsGroupList"
+              :subscribeAreaMap="projectDetailFilters.subscribeAreaMap"
+              :subscribeBuyerClass="projectDetailFilters.subscribeBuyerClass"
+            />
+          </el-tab-pane>
+        </el-tabs>
       </div>
     </div>
     <purchase-ranking-dialog v-if="rankingDialogOptions.visible" :options.sync="rankingDialogOptions"></purchase-ranking-dialog>
@@ -126,9 +160,11 @@
 </template>
 
 <script>
+import { Tabs, TabPane } from 'element-ui'
 import Layout from '@/components/common/ContentLayout'
 import SelectMonth from '@/components/report-data/SelectMonth.vue'
 import ProjectTop from '@/components/report-data/ProjectTop.vue'
+import ProjectTopTable from '@/components/report-data/ProjectTopTable.vue'
 import { getReportDetail, getReportIndex } from '@/api/modules'
 import { dateFormatter } from '@/utils/globalFunctions'
 import BarLineChart from '@/components/chart/BarLineChart'
@@ -137,13 +173,20 @@ import MapChart from '@/components/chart/MapChart'
 import bmEmpty from '@/components/common/BigMemberEmpty'
 import Empty from '@/components/common/Empty'
 import PurchaseRankingDialog from '@/views/reportData/components/PurchaseRankingDialog'
+import ProjectDetailsList from '@/views/reportData/components/ProjectDetailsList.vue'
+import { tabsSticky } from '@/utils/mixins/el-tabs-sticky'
 
 export default {
   name: 'page_week',
+  mixins: [tabsSticky],
   components: {
+    [Tabs.name]: Tabs,
+    [TabPane.name]: TabPane,
+    ProjectDetailsList,
     Layout,
     SelectMonth,
     ProjectTop,
+    ProjectTopTable,
     BarLineChart,
     DuoToneChart,
     bmEmpty,
@@ -153,8 +196,11 @@ export default {
   },
   data () {
     return {
+      // 是否历史周报(历史周报部分功能使用旧的)
+      useNewVersionReport: true,
       canQuery: true,
       isWeekIndex: 0,
+      tabActiveName: '1',
       yearmonth: '', // 第一个月报的年份
       start: 0,
       end: 0,
@@ -305,6 +351,11 @@ export default {
         data: []
       },
       isFinish: false,
+      projectDetailFilters: {
+        keywordsGroupList: [],
+        subscribeAreaMap: {},
+        subscribeBuyerClass: []
+      },
       // 采购排行榜数据
       rankingDialogOptions: {
         visible: false,
@@ -371,7 +422,6 @@ export default {
       this.getReportList(data)
     },
     getReportList (time) {
-      console.log(time, 'times')
       const setyear = time.slice(0, 4)
       const that = this
       getReportIndex({ ym: setyear }).then((res) => {
@@ -407,18 +457,39 @@ export default {
       getReportDetail({ start: start, end: end }).then(res => {
         if (res.error_code === 0) {
           if (res.data) {
+            if (res.data) {
+              this.useNewVersionReport = res.data.isNewData || !!1
+            }
             // 订阅关键词
-            if (res.data.item && res.data.item.length > 0 && res.data.item.toString() !== '') {
+            if (res.data && res.data.item && Array.isArray(res.data.item) && res.data.item.length > 0) {
+              this.projectDetailFilters.keywordsGroupList = this.createKeywordGroupList(res.data.item)
               this.keywordsGroup = res.data.item.join('、')
             } else {
               this.keywordsGroup = '--'
             }
+            if (res.data && res.data.area) {
+              this.projectDetailFilters.subscribeAreaMap = res.data.area
+            }
+            if (res.data && res.data.buyerClass) {
+              this.projectDetailFilters.subscribeBuyerClass = res.data.buyerClass
+            }
             this.isFinish = true
             this.initChartData(res.data)
           }
         }
       })
     },
+    createKeywordGroupList (arr) {
+      let groupList = []
+      if (!Array.isArray(arr)) return groupList
+      groupList = arr.map(item => {
+        return {
+          s_item: item,
+          a_key: []
+        }
+      })
+      return groupList
+    },
     // 初始化数据
     initChartData (res) {
       // 项目数量 1
@@ -653,7 +724,14 @@ export default {
     formatCurBidEntData (data) {
       if (data && data.length > 0) {
         this.bidEntTop.show = true
-        this.bidEntTop.data = data
+        this.bidEntTop.data = data.map(v => {
+          return {
+            ...v,
+            name: v.winner,
+            value: v.project_count + '个',
+            parent: v.project_count / data[0].project_count * 100 + '%'
+          }
+        })
       }
     },
     // 本月项目规模排行榜数据
@@ -844,6 +922,23 @@ export default {
       })
       return max[0]
     },
+    buyerTitleClick (item) {
+      this.toOtherPage(item.name, 'buyer')
+    },
+    winnerTitleClick (item) {
+      this.toOtherPage(item.id, 'winner')
+    },
+    toOtherPage (id, type) {
+      let goLink = ''
+      if (type === 'winner') {
+        goLink = `/ent_portrait/${id}`
+      } else if (type === 'buyer') {
+        goLink = `/unit_portrayal/${id}`
+      }
+      if (id && goLink) {
+        window.open(`/swordfish/page_big_pc${goLink}`)
+      }
+    },
     // 采购排行榜查看全部
     viewMoreRanking(type){
       switch(type) {
@@ -983,4 +1078,32 @@ export default {
       }
     }
   }
+
+  .tabs {
+    margin-top: 24px;
+    background-color: #fff;
+    ::v-deep {
+      .fixed-nav {
+        width: 920px;
+        box-shadow: inset 0 -1px 0 0 rgb(0, 0, 0, 0.05);
+      }
+      .el-tabs__header {
+        margin: 0;
+        padding: 0 40px;
+        border-bottom: 1px solid #ECECEC;
+        background-color: #fff;
+      }
+      .el-tabs__item {
+        height: 50px;
+        line-height: 50px;
+        font-size: 16px;
+        color: #686868;
+      }
+      .el-tabs__nav-wrap {
+        &::after {
+          content: unset;
+        }
+      }
+    }
+  }
 </style>

src/views/reportData/pageWeek.vue

@@ -47,76 +47,105 @@
           </div>
         </div>
       </div>
-      <div class="echartsView" v-if="nodata">
-        <!-- 本周新增招标项目数量 -->
-        <div class="newAdd_bid" v-if="newDrawCount.show">
-          <div class="chart-title">本周新增招标项目数量</div>
-          <DuoToneChart :datas="newDrawCount.data"></DuoToneChart>
-        </div>
-        <!-- 本周新增招标项目预算 -->
-        <div class="newAdd_bidBudget" v-if="newBudget.show">
-          <div class="chart-title">本周新增招标项目预算</div>
-          <BarLineChart :datas="newBudget.data" :options="newBudget.options"></BarLineChart>
-        </div>
-        <!-- 本周新增开标项目数量 -->
-        <div class="newAdd_bidOpen" v-if="newOpenCount.show">
-          <div class="chart-title">本周新增开标项目数量</div>
-          <DuoToneChart :datas="newOpenCount.data"></DuoToneChart>
-        </div>
-        <!-- 本周新增招标项目规模 -->
-        <div class="newAdd_scale" v-if="newScale.show">
-          <div class="chart-title">本周新增开标项目规模</div>
-          <BarLineChart :datas="newScale.data" :options="newScale.options"></BarLineChart>
-        </div>
-        <!-- 项目金额排行榜 -->
-        <ProjectTop v-if="projectAmount.show" title="项目金额排行榜" :data="projectAmount.list" type='amount'></ProjectTop>
-      </div>
-      <div v-if="nodata">
-        <!-- 下周开标提醒 -->
-        <div v-if="priority.nextweek_bidopen.length > 0">
-          <CompanyDetail  title="下周开标提醒" :datas="priority" type="bidopen"></CompanyDetail>
-        </div>
-        <!-- 重点关注项目 -->
-        <div v-if="priority.follow_project.length > 0">
-          <CompanyDetail title="重点关注项目" :datas="priority" type="project"></CompanyDetail>
-        </div>
-        <!-- 重点关注企业 -->
-        <div v-if="priority.follow_ent.length > 0" >
-          <CompanyDetail title="重点关注企业" :datas="priority" type="ent"></CompanyDetail>
-        </div>
-      </div>
+      <el-tabs class="tabs sticky-tab-container" v-model="tabActiveName" v-if="nodata">
+        <el-tab-pane label="本周分析" name="1">
+          <div class="echartsView" >
+            <!-- 本周新增招标项目数量 -->
+            <div class="newAdd_bid" v-if="newDrawCount.show">
+              <div class="chart-title">本周新增招标项目数量</div>
+              <DuoToneChart :datas="newDrawCount.data"></DuoToneChart>
+            </div>
+            <!-- 本周新增招标项目预算 -->
+            <div class="newAdd_bidBudget" v-if="newBudget.show">
+              <div class="chart-title">本周新增招标项目预算</div>
+              <BarLineChart :datas="newBudget.data" :options="newBudget.options"></BarLineChart>
+            </div>
+            <!-- 本周新增开标项目数量 -->
+            <div class="newAdd_bidOpen" v-if="newOpenCount.show">
+              <div class="chart-title">本周新增开标项目数量</div>
+              <DuoToneChart :datas="newOpenCount.data"></DuoToneChart>
+            </div>
+            <!-- 本周新增招标项目规模 -->
+            <div class="newAdd_scale" v-if="newScale.show">
+              <div class="chart-title">本周新增开标项目规模</div>
+              <BarLineChart :datas="newScale.data" :options="newScale.options"></BarLineChart>
+            </div>
+            <!-- 项目金额排行榜/本周项目规模排行榜TOP30(同一个东西，名字在p350改了，老报告展示老名字，新报告展示新名字) -->
+            <template v-if="projectAmount.show">
+              <ProjectTopTable v-if="useNewVersionReport" title="本周项目规模排行榜TOP30" :data="projectAmount.list" type='amount'></ProjectTopTable>
+              <ProjectTop v-else title="项目金额排行榜" :data="projectAmount.list" type='amount'></ProjectTop>
+            </template>
+
+            <!-- 下周开标提醒 -->
+            <div v-if="priority.nextweek_bidopen.length > 0">
+              <CompanyDetail :linkable="useNewVersionReport" title="下周开标提醒" :datas="priority" type="bidopen"></CompanyDetail>
+            </div>
+            <!-- 重点关注项目 -->
+            <div v-if="priority.follow_project.length > 0">
+              <CompanyDetail title="重点关注项目" :datas="priority" type="project"></CompanyDetail>
+            </div>
+            <!-- 重点关注企业/已监控企业本周项目动态(同一个东西，名字在p350改了，老报告展示老名字，新报告展示新名字) -->
+            <div v-if="priority.follow_ent.length > 0" >
+              <ProjectTopTable class="follow-ent-module" v-if="useNewVersionReport" title="已监控企业本周项目动态" :data="priority.follow_ent" type="followEnt"></ProjectTopTable>
+              <CompanyDetail v-else :linkable="useNewVersionReport" title="重点关注企业" :datas="priority" type="ent"></CompanyDetail>
+            </div>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane lazy label="本周项目明细" name="2" v-if="useNewVersionReport">
+          <ProjectDetailsList
+            :start="start - 0"
+            :end="end - 0"
+            reportType="week"
+            :subscribeClassList="projectDetailFilters.keywordsGroupList"
+            :subscribeAreaMap="projectDetailFilters.subscribeAreaMap"
+            :subscribeBuyerClass="projectDetailFilters.subscribeBuyerClass"
+          />
+        </el-tab-pane>
+      </el-tabs>
     </div>
     <div class="page_week_artical"></div>
   </Layout>
 </template>
 
 <script>
-
+import { Tabs, TabPane } from 'element-ui'
 import SelectMonth from '@/components/report-data/SelectMonth.vue'
 import Layout from '@/components/common/ContentLayout'
 import CompanyDetail from '@/components/report-data/CompanyDetail.vue'
 import ProjectTop from '@/components/report-data/ProjectTop.vue'
+import ProjectTopTable from '@/components/report-data/ProjectTopTable.vue'
 import { getReportDetail, getReportIndex } from '@/api/modules'
 import { dateFormatter } from '@/utils/globalFunctions'
 import DuoToneChart from '@/components/chart/DuoToneChart'
 import BarLineChart from '@/components/chart/BarLineChart'
 import bmEmpty from '@/components/common/BigMemberEmpty'
 import Empty from '@/components/common/Empty'
+import ProjectDetailsList from '@/views/reportData/components/ProjectDetailsList.vue'
+import { tabsSticky } from '@/utils/mixins/el-tabs-sticky'
+
 export default {
   name: 'page_week',
+  mixins: [tabsSticky],
   components: {
+    [Tabs.name]: Tabs,
+    [TabPane.name]: TabPane,
     SelectMonth,
     CompanyDetail,
+    ProjectTopTable,
     ProjectTop,
     DuoToneChart,
     BarLineChart,
     bmEmpty,
     Empty,
+    ProjectDetailsList,
     Layout
   },
   data () {
     return {
+      // 是否历史周报(历史周报部分功能使用旧的)
+      useNewVersionReport: true,
       canQuery: true,
+      tabActiveName: '1',
       isWeekIndex: 0,
       start: 0,
       end: 0,
@@ -178,6 +207,11 @@ export default {
         nextweek_bidopen: [],
         follow_ent: [],
         follow_project: []
+      },
+      projectDetailFilters: {
+        keywordsGroupList: [],
+        subscribeAreaMap: {},
+        subscribeBuyerClass: []
       }
     }
   },
@@ -217,7 +251,6 @@ export default {
     // 周报列表
     getReportList (time) {
       getReportIndex({ ym: time }).then((res) => {
-        console.log(res)
         if (res.data && res.data.list && res.data.list.length !== 0) {
           res.data.list.forEach(function (item, i) {
             if (item.pushtime) {
@@ -280,12 +313,22 @@ export default {
     getDetail (start, end) {
       getReportDetail({ start: start, end: end }).then(res => {
         if (res.error_code === 0) {
+          if (res.data) {
+            this.useNewVersionReport = res.data.isNewData
+          }
           // 订阅关键词组
-          if (res.data.item && res.data.item.length > 0 && res.data.item.toString() !== '') {
+          if (res.data && res.data.item && Array.isArray(res.data.item) && res.data.item.length > 0) {
+            this.projectDetailFilters.keywordsGroupList = this.createKeywordGroupList(res.data.item)
             this.keywordsGroup = res.data.item.join('、')
           } else {
             this.keywordsGroup = '--'
           }
+          if (res.data && res.data.area) {
+            this.projectDetailFilters.subscribeAreaMap = res.data.area
+          }
+          if (res.data && res.data.buyerClass) {
+            this.projectDetailFilters.subscribeBuyerClass = res.data.buyerClass
+          }
           // 本周新增招标项目数量
           if (res.data.zhao_matchitem && res.data.zhao_matchitem.length > 0) {
             this.newDrawCount.show = true
@@ -316,11 +359,13 @@ export default {
           }
           // 项目金额排行榜
           if (res.data.project_amount && res.data.project_amount.length > 0) {
-            res.data.project_amount.forEach((item) => {
-              // 万元转换成亿
-              item.budget = (item.budget / 10000).fixed(2)
-              item.bidamount = (item.bidamount / 10000).fixed(2)
-            })
+            if (!this.useNewVersionReport) {
+              res.data.project_amount.forEach((item) => {
+                // 万元转换成亿
+                item.budget = item.budget ? (item.budget / 10000).fixed(2) : 0
+                item.bidamount = item.bidamount ? (item.bidamount / 10000).fixed(2) : 0
+              })
+            }
             this.projectAmount.list = res.data.project_amount
             this.projectAmount.show = true
           } else {
@@ -341,6 +386,17 @@ export default {
         }
       })
     },
+    createKeywordGroupList (arr) {
+      let groupList = []
+      if (!Array.isArray(arr)) return groupList
+      groupList = arr.map(item => {
+        return {
+          s_item: item,
+          a_key: []
+        }
+      })
+      return groupList
+    },
     /* 数据处理 */
     // 处理进度条数据
     formatProgressData (data) {
@@ -669,4 +725,36 @@ export default {
       }
     }
   }
+
+  .follow-ent-module {
+    padding-top: 0;
+  }
+
+  .tabs {
+    margin-top: 24px;
+    background-color: #fff;
+    ::v-deep {
+      .fixed-nav {
+        width: 920px;
+        box-shadow: inset 0 -1px 0 0 rgb(0, 0, 0, 0.05);
+      }
+      .el-tabs__header {
+        margin: 0;
+        padding: 0 40px;
+        border-bottom: 1px solid #ECECEC;
+        background-color: #fff;
+      }
+      .el-tabs__item {
+        height: 50px;
+        line-height: 50px;
+        font-size: 16px;
+        color: #686868;
+      }
+      .el-tabs__nav-wrap {
+        &::after {
+          content: unset;
+        }
+      }
+    }
+  }
 </style>