Ver código fonte

Merge branch 'dev' into feature-yf

yangfeng 4 anos atrás
pai
commit
4427ed8311

+ 1 - 1
public/index.html

@@ -34,7 +34,7 @@
       max-width: 1200px;
       max-width: 1200px;
     }
     }
   </style>
   </style>
-  <body style="background-color: #fff;">
+  <body style="background-color: #f2f2f4;">
     <noscript>
     <noscript>
       <strong>We're sorry but app1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
       <strong>We're sorry but app1 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     </noscript>

+ 5 - 7
src/api/index.js

@@ -1,6 +1,5 @@
 import axios from 'axios'
 import axios from 'axios'
 import mock from '@/api/mock'
 import mock from '@/api/mock'
-import qs from 'qs'
 
 
 console.log('[debug]当前环境:', process.env)
 console.log('[debug]当前环境:', process.env)
 const service = axios.create({
 const service = axios.create({
@@ -9,12 +8,6 @@ const service = axios.create({
 
 
 service.interceptors.request.use(config => {
 service.interceptors.request.use(config => {
   // 在请求发送之前做一些事
   // 在请求发送之前做一些事
-  if (config.method === 'post' || config.method === 'POST') {
-    if (typeof config.data !== 'string') {
-      config.data = qs.stringify(config.data)
-    }
-  }
-  // 获取插入token
   return config
   return config
 }, function (error) {
 }, function (error) {
   // 当出现请求错误是做一些事
   // 当出现请求错误是做一些事
@@ -22,6 +15,11 @@ service.interceptors.request.use(config => {
   return Promise.reject(error)
   return Promise.reject(error)
 })
 })
 
 
+// 添加一个返回拦截器
+service.interceptors.response.use(response => {
+  return response.data
+})
+
 const useMock = process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true'
 const useMock = process.env.NODE_ENV === 'development' && process.env.VUE_APP_MOCK === 'true'
 
 
 export default useMock ? mock : service
 export default useMock ? mock : service

+ 2 - 2
src/api/modules/home.js

@@ -9,10 +9,10 @@ export function getSearchTag (params) {
   })
   })
 }
 }
 
 
-export function getHomeActivity (data) {
+export function getPushList (data) {
   data = qs.stringify(data)
   data = qs.stringify(data)
   return request({
   return request({
-    url: '/activityList',
+    url: '/subscribe/push/list',
     method: 'post',
     method: 'post',
     data: data
     data: data
   })
   })

BIN
src/assets/images/icon/edit.png


BIN
src/assets/images/icon/time.png


+ 26 - 9
src/assets/style/reset-ele.scss

@@ -1,15 +1,32 @@
 @import './_mixin';
 @import './_mixin';
 @import './_variables';
 @import './_variables';
 
 
-.big-member-page .el-pagination.is-background .el-pager {
-  li {
-    background-color: #fff;
-    border: 1px solid rgba($color: #000, $alpha: 0.05);
+.big-member-page {
+  // 分页样式重置
+  .el-pagination-container {
+    margin-top: 28px;
+    padding-bottom: 60px;
+    text-align: right;
   }
   }
-
-  li:not(.disabled).active,
-  li:not(.disabled):hover {
-    color: #fff;
-    background-color: $color-text--highlight;
+  .el-pagination.is-background .el-pager {
+    li {
+      background-color: #fff;
+      border: 1px solid rgba($color: #000, $alpha: 0.05);
+    }
+  
+    li:not(.disabled).active,
+    li:not(.disabled):hover {
+      color: #fff;
+      background-color: $color-text--highlight;
+    }
+  }
+  
+  // button默认颜色重置
+  .el-button {
+    display: flex;
+    align-items: center;
+    padding: 8px 16px;
+    font-size: 14px;
+    line-height: 24px;
   }
   }
 }
 }

+ 70 - 0
src/components/CompanyDetail.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="nextWeekOpen">
+    <div class="next_open_head">{{title}}</div>
+    <div class="next_open_main">
+      <div class="open_pro_item" v-for="(item, index) in data" :key="index">
+        <div class="pro_main" v-for="(data, i) in item" :key="i">
+          <div class="item_label">{{data.label}}</div>
+          <div class="item_content">{{data.content}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['title', 'data'],
+  name: 'nextWeekOpen',
+  data () {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .nextWeekOpen{
+    padding: 32px 40px;
+    background: #ffffff;
+    .next_open_head{
+      font-size: 18px;
+      color: #1d1d1d;
+      line-height: 28px;
+    }
+    .next_open_main{
+      display: flex;
+      justify-content: space-between;
+      margin-top: 16px;
+      .open_pro_item{
+        padding: 24px;
+        width: 412px;
+        height: 200px;
+        opacity: 1;
+        border: 1px solid #ececec;
+        border-radius: 5px;
+        .pro_main{
+          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;
+          }
+        }
+      }
+    }
+  }
+</style>

+ 156 - 0
src/components/SelectMonth.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="select_time" :class="setHeight">
+    <div class="select_label">选择时间:</div>
+    <div class="select_week_time">
+      <div class="select_right">
+        <div class="op_week_year">
+          <div class="week_year" v-for="(item, index) in listYear" :key="index">{{item}}年</div>
+        </div>
+        <ul class="week_many">
+          <li class="option_week" v-for="(item, index) in listWeek" :key="index">
+            <span class="list_span" v-for="(data, i) in item" :class='{active:i==isActive&&index==isIndexActive}' :key="i" @click="getWeek(index, i)">{{data}}月</span>
+          </li>
+        </ul>
+        <div class="putaway" @click="getManyTimes()">
+          <span class="put_text">{{btnText}}</span>
+          <span class="put_icon" :class="iconClass"></span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { dateFormatter } from '@/utils/globalFunctions'
+import { Icon } from 'element-ui'
+export default {
+  name: 'select_time',
+  components: {
+    // eslint-disable-next-line vue/no-unused-components
+    Icon
+  },
+  data () {
+    return {
+      listYear: [],
+      listWeek: [],
+      setHeight: 'setHeight',
+      isActive: 0,
+      isIndexActive: 0,
+      btnText: '更多',
+      iconClass: 'el-icon-arrow-down'
+    }
+  },
+  created () {
+    this.getTimes()
+  },
+  methods: {
+    getTimes () {
+      // 处理月份
+      const week = dateFormatter(new Date(), 'M')
+      const aloneWeek = []
+      for (var a = 2; a <= week; a++) {
+        var weeks = a
+        weeks = weeks - 1
+        aloneWeek.push(weeks + '')
+      }
+      aloneWeek.push(week)
+      this.listWeek.push(aloneWeek)
+
+      // 处理年份、添加12月
+      let year = dateFormatter(new Date(), 'yyyy')
+      this.listYear.push(Number(year))
+      for (var i = 0; i < 6; i++) {
+        year = year - 1
+        this.listYear.push(year + '')
+        var newArr = []
+        for (var tw = 1; tw <= 12; tw++) {
+          var twM = tw
+          twM = '' + twM
+          newArr.push(twM)
+        }
+        this.listWeek.push(newArr)
+      }
+    },
+    getWeek (index, i) {
+      console.log(index, i)
+      this.isActive = i
+      this.isIndexActive = index
+    },
+    // 更多、收起
+    getManyTimes () {
+      if (this.btnText === '更多') {
+        this.btnText = '收起'
+        this.iconClass = 'el-icon-arrow-up'
+        this.setHeight = ''
+      } else {
+        this.btnText = '更多'
+        this.iconClass = 'el-icon-arrow-down'
+        this.setHeight = 'setHeight'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.select_time{
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  margin: 0 auto;
+  padding: 30px 0 0;
+  width: 840px;
+  height: auto;
+  border-bottom: 1px solid #ececec;
+  .select_label{
+    width: 70px;
+    height: 24px;
+    opacity: 1;
+    font-size: 14px;
+    font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+    font-weight: 400;
+    text-align: LEFT;
+    color: #1d1d1d;
+    line-height: 24px;
+  }
+  .select_week_time{
+    flex: 1;
+    margin-left: 32px;
+    .select_right{
+      display: flex;
+      .week_year{
+        display: flex;
+        margin-bottom: 16px;
+        width: 44px;
+        opacity: 1;
+        font-size: 13px;
+        font-weight: 400;
+        color: #999999;
+        line-height: 20px;
+      }
+      .week_many{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        margin-left: 32px;
+        .option_week{
+          margin-bottom: 16px;
+          .list_span{
+            margin-right: 24px;
+            font-size: 13px;
+            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+            font-weight: 400;
+            text-align: LEFT;
+            color: #1d1d1d;
+            line-height: 20px;
+            cursor: pointer;
+          }
+          .active{
+            color: #2CB7CA;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

+ 125 - 0
src/components/article-item/ArticleItem.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="article-item" @click="onClick">
+    <div class="a-i-left ellipsis" v-html="calcTitle"></div>
+    <div class="a-i-right">
+      <div class="tags">
+        <span class="tag" v-if="article.area">{{ article.area }}</span>
+        <span class="tag orange" v-if="article.type">{{ article.type }}</span>
+        <span class="tag green" v-if="article.buyerclass">{{ article.buyerclass }}</span>
+        <span class="tag dpink" v-if="article.calcBudget">{{ article.calcBudget }}</span>
+      </div>
+      <div class="time-container">
+        <span class="el-icon-jy-time"></span>
+        <span class="time-text">{{ dateFromNow(article.publishtime * 1000) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Tag } from 'element-ui'
+import { moneyUnit, dateFromNow, replaceKeyword } from '@/utils/'
+export default {
+  name: 'article-item',
+  components: {
+    [Tag.name]: Tag
+  },
+  props: {
+    index: {
+      type: [String, Number],
+      default: '1'
+    },
+    article: {
+      type: Object,
+      default () {
+        return {
+          title: '', // 标题
+          area: '', // 区域
+          type: '', // 类型
+          buyerclass: '', // 行业
+          budget: '', // 金额
+          publishtime: 0, // 时间
+          matchkeys: [] // 高亮的关键词
+        }
+      }
+    }
+  },
+  computed: {
+    calcBudget () {
+      return moneyUnit(this.article.budget)
+    },
+    calcTitle () {
+      const hightLightedTitle = replaceKeyword(this.article.title, this.article.matchkeys, ['<span class="highlight-text">', '</span>'])
+      return `${this.index}. ${hightLightedTitle}`
+    }
+  },
+  methods: {
+    dateFromNow,
+    onClick () {
+      this.$emit('onClick')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  $border-color: #ECECEC;
+  @include diy-icon('time', 20, 20);
+
+  .article-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 22px 0;
+    border-bottom: 1px solid $border-color;
+    cursor: pointer;
+
+    &:first-of-type,
+    &:border-top {
+      border-top: 1px solid $border-color;
+    }
+
+    .a-i-left {
+      flex: 1;
+    }
+    .a-i-right,
+    .tags,
+    .time-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .tag {
+      display: flex;
+      align-items: center;
+      padding: 1px 6px;
+      margin-right: 14px;
+      color: #fff;
+      font-size: 13px;
+      line-height: 20px;
+      background-color: #2CB7CA;
+      border-radius: 3px;
+      &:not(:last-of-type) {
+        margin-right: 4px;
+      }
+
+      &.orange {
+        background-color: #FFBA00;
+      }
+      &.green {
+        background-color: #25C78C;
+      }
+      &.dpink {
+        background-color: #FF878D;
+      }
+    }
+
+    .time-text {
+      margin-left: 6px;
+      font-size: 14px;
+      color: #797a7e;
+      line-height: 24px;
+    }
+  }
+</style>

+ 4 - 29
src/components/common/Empty.vue

@@ -33,7 +33,6 @@ export default {
     flex: 1;
     flex: 1;
     padding: 16px;
     padding: 16px;
     box-sizing: border-box;
     box-sizing: border-box;
-    background-color: rgba(245, 244, 249, 1);
 
 
     .empty-content-position {
     .empty-content-position {
       display: flex;
       display: flex;
@@ -48,40 +47,16 @@ export default {
 
 
     .empty-main {
     .empty-main {
       @extend .empty-content-position;
       @extend .empty-content-position;
+      margin-top: 10px;
       text-align: center;
       text-align: center;
-    }
-
-    .max-width70 {
-      width: 70%;
-    }
-
-    .max-width80 {
-      width: 80%;
-    }
-
-    .tip-text {
-      color: #5F5E64;
+      color: #999;
       font-size: 14px;
       font-size: 14px;
-      line-height: 20px;
-      text-align: center;
-    }
-
-    .tip-sub-text {
-      color: #9B9CA3;
-      font-size: 13px;
-      line-height: 20px;
-      margin-top: 6px;
-      text-align: center;
+      line-height: 22px;
     }
     }
 
 
-    .image {
+    .el-image {
       width: 160px;
       width: 160px;
       height: 160px;
       height: 160px;
     }
     }
-
-    .empty-image {
-      background: url(~@/assets/images/empty.png) no-repeat;
-      background-size: contain;
-    }
   }
   }
 </style>
 </style>

+ 218 - 0
src/components/push-list/PushList.vue

@@ -0,0 +1,218 @@
+<template>
+  <el-card class="push-list-card">
+    <div slot="header" class="clearfix">
+      <span class="card-title">订阅推送</span>
+      <el-button class="sub-manager" type="plain" icon="el-icon-jy-edit">订阅管理</el-button>
+    </div>
+    <div class="push-list" v-loading="listState.loading">
+      <article-item
+        v-for="(item, index) in listState.list"
+        :key="index"
+        :index="index + 1"
+        :article="item"
+        @onClick="toDetail(item)"
+      />
+      <empty v-if="listState.list.length === 0 && listState.loaded">
+        <span>订阅关键词,接收最新招投标信息</span>
+        <div class="add-key-button">
+          <span class="icon-chahao"></span>
+          <span class="button-text">订阅关键词</span>
+        </div>
+      </empty>
+    </div>
+    <div class="el-pagination-container">
+      <el-pagination
+        background
+        layout="prev, pager, next, ->, total"
+        :hide-on-single-page="true"
+        :current-page="listState.pageNum"
+        :page-size="listState.pageSize"
+        :total="listState.total"
+        @current-change="onPageChange"
+      >
+      </el-pagination>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import { Pagination, Card, Button } from 'element-ui'
+import Empty from '@/components/common/Empty.vue'
+import ArticleItem from '@/components/article-item/ArticleItem.vue'
+import { getPushList } from '@/api/modules/'
+
+export default {
+  name: 'push-list',
+  components: {
+    [Pagination.name]: Pagination,
+    [Card.name]: Card,
+    [Button.name]: Button,
+    ArticleItem,
+    Empty
+  },
+  props: {
+    filters: {
+      type: Object,
+      default () {
+        return {
+          area: '',
+          time: ''
+        }
+      }
+    }
+  },
+  computed: {},
+  data () {
+    return {
+      listState: {
+        loaded: true, // 是否已经搜索过
+        loading: false,
+        pageNum: 1, // 当前页
+        pageSize: 10, // 每页多少条数据
+        total: 0, // 一共多少条数据
+        list: [] // 查询请求返回的数据
+      }
+    }
+  },
+  created () {
+    this.doQuery()
+  },
+  methods: {
+    // 恢复数据至第一次请求的状态(页码等)
+    resetListState () {
+      const state = {
+        loaded: false,
+        loading: false,
+        pageNum: 1,
+        total: 0,
+        list: []
+      }
+      Object.assign(this.listState, state)
+    },
+    doQuery (filters) {
+      this.resetListState()
+      this.getList(filters)
+    },
+    async getList (filters) {
+      const query = {
+        pagenum: this.listState.pageNum,
+        pageSize: this.listState.pageSize,
+        area: this.filters.area,
+        time: this.filters.time
+      }
+
+      if (filters && Object.keys(filters).length > 0) {
+        query.area = filters.area
+        query.time = filters.time
+      }
+
+      this.listState.loading = true
+      this.listState.loaded = false
+      const res = await getPushList(query)
+      this.listState.loading = false
+      this.listState.loaded = true
+
+      if (res.error_code === 0) {
+        this.listState.total = res.data.total
+        this.listState.list = res.data.list || []
+      } else {
+        this.listState.total = 0
+        this.listState.list = []
+      }
+    },
+    toDetail (item) {
+      const { _id } = item
+      window.open(`/article/content/${_id}.html`)
+    },
+    onPageChange (p) {
+      this.listState.pageNum = p
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @include diy-icon('edit', 20, 20);
+  // card样式重置
+  ::v-deep {
+    .el-card__header {
+      margin: 0 40px;
+      padding-left: 0;
+      padding-right: 0;
+    }
+    .el-card__body {
+      padding: 20px 40px;
+    }
+    .el-button {
+      color: #1d1d1d;
+      border-color: #E0E0E0;
+      &.el-button:focus,
+      &.el-button:hover {
+        color: inherit;
+        border-color: #E0E0E0;
+        background-color: inherit;
+      }
+    }
+    .empty-container {
+      margin-top: 60px;
+    }
+  }
+
+  .push-list-card {
+    .card-title {
+      font-size: 24px;
+      color: #1d1d1d;
+      line-height: 36px;
+    }
+    .sub-manager {
+      float: right;
+    }
+    .push-list {
+      min-height: 545px;
+      border-top: 1px solid transparent;
+    }
+    .add-key-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 32px;
+      padding: 8px 16px;
+      color: #F7F9FA;
+      border-radius: 6px;
+      background-color: #2ABED1;
+      cursor: pointer;
+      .icon-chahao {
+        margin-right: 4px;
+        transform: rotate(-45deg);
+      }
+      .button-text {
+        margin-left: 4px;
+        white-space: nowrap;
+      }
+    }
+    .icon-chahao {
+      position: relative;
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      &:before,
+      &:after {
+        position: absolute;
+        content: '';
+        background-color: #fff;
+        top: 50%;
+        left: 50%;
+        width: 14px;
+        height: 2px;
+        border-radius: 2px;
+      }
+      &:before {
+        transform: translate(-50%,-50%) rotate(45deg);
+      }
+      &:after {
+        transform: translate(-50%,-50%) rotate(-45deg);
+      }
+    }
+  }
+</style>

+ 5 - 0
src/router.js

@@ -12,6 +12,11 @@ export default new Router({
       name: 'home',
       name: 'home',
       component: () => import('@/views/Home.vue')
       component: () => import('@/views/Home.vue')
     },
     },
+    {
+      path: '/week',
+      name: 'week',
+      component: () => import('@/views/reportData/pageWeek.vue')
+    },
     {
     {
       path: '*',
       path: '*',
       name: '404',
       name: '404',

+ 45 - 18
src/utils/globalFunctions.js

@@ -237,24 +237,51 @@ export function formatSize (size, pointLength, units) {
   return (unit === 'B' ? size : size.toFixed(pointLength === undefined ? 2 : pointLength)) + (unit || '')
   return (unit === 'B' ? size : size.toFixed(pointLength === undefined ? 2 : pointLength)) + (unit || '')
 }
 }
 
 
-// 文件类型转换
-export function docTypeConvert (docType = 'pdf') {
-  const typeMap = {
-    doc: 'word',
-    docx: 'word',
-    xls: 'excel',
-    xlsx: 'excel',
-    ppt: 'ppt',
-    pdf: 'pdf',
-    1: 'word', // doc
-    2: 'pdf',
-    3: 'excel', // xls
-    4: 'ppt',
-    5: 'txt',
-    6: '其他'
+// 金额类型转换
+export function moneyUnit (m, type = 'string', lv = 0) {
+  const mUnit = {
+    levelArr: ['元', '万元', '亿元', '万亿元'],
+    test (num, type, lv) {
+      if (num === 0) {
+        if (type === 'string') {
+          return '0元'
+        }
+        if (type === 'lv') {
+          return this.levelArr[lv]
+        }
+        if (type === 'number') {
+          return 0
+        }
+        if (type === 'index') {
+          return lv
+        }
+      }
+
+      var result = num / Math.pow(10000, lv)
+
+      if (result > 10000 && lv < 2) {
+        return this.test(num, type, lv + 1)
+      } else {
+        if (type === 'string') {
+          return String(Math.floor(result * 100) / 100).replace('.00', '') + this.levelArr[lv]
+        }
+        if (type === 'lv') {
+          return this.levelArr[lv]
+        }
+        if (type === 'number') {
+          return String(Math.floor(result * 100) / 100).replace('.00', '')
+        }
+        if (type === 'index') {
+          return lv
+        }
+      }
+    }
+  }
+  if (m === undefined || m === null) {
+    return ''
+  } else {
+    return mUnit.test(m, type, lv)
   }
   }
-  const type = typeMap[docType]
-  return type || docType // map中不存在的,则返回原始类型
 }
 }
 
 
 /**
 /**
@@ -270,7 +297,7 @@ export function docTypeConvert (docType = 'pdf') {
  *
  *
  * 批量高亮-----
  * 批量高亮-----
  * 比如:要将 - `剑鱼标讯工具函数` 字符串中的 `工具` `剑鱼` 高亮
  * 比如:要将 - `剑鱼标讯工具函数` 字符串中的 `工具` `剑鱼` 高亮
- * 则此时 value -> `剑鱼标讯工具函数批量高亮`
+ * 则此时 value -> `剑鱼标讯工具函数`批量高亮
  *        oldChar -> ['工具', '剑鱼']
  *        oldChar -> ['工具', '剑鱼']
  *        newChar -> ['<span class="highlight-text">', '</span>']
  *        newChar -> ['<span class="highlight-text">', '</span>']
  *
  *

+ 469 - 0
src/views/reportData/pageWeek.vue

@@ -0,0 +1,469 @@
+<template>
+  <div class="page_week">
+    <div class="page_week_main">
+      <!-- 选择周报时间 -->
+      <div class="week_time">
+        <SelectMonth></SelectMonth>
+        <div class="select_report">
+          <div class="week_report" v-for="(item, index) in 4" :key="index" @click="selectWeek(index)" :class="{weekActive:index==isWeekIndex}">
+            <div class="week_report_main">
+              <div class="report_top">
+                <div class="reoprt_time">
+                  <span class="week_text">周</span>
+                  <span class="week_days">1月1日-1月7日</span>
+                </div>
+                <div class="repot_gettime">2020/01/01</div>
+              </div>
+              <div class="report_bot">
+                <span class="push_text">推送数据条数</span>
+                <div class="push_report">
+                  <span class="push_num">19</span>
+                  <span class="el-icon-arrow-right"></span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 数据报告-周报 -->
+      <div class="dataReport">
+        <div class="dataReport_main">
+          <div class="data_r_head">
+            <div class="data_r_title">数据报告-周报</div>
+            <div class="data_r_week">(1月1日-1月7日)</div>
+          </div>
+          <div class="data_keys">
+            <span class="keys_label">订阅关键词组:</span>
+            <span class="list_key">端点安全、网络安全、应用安全、数据安全、身份与访问管理、安全管理;</span>
+          </div>
+          <div class="data_line"></div>
+          <div class="data_item">
+            <p class="item_handle">数据来源:已为您推送的招标项目信息</p>
+            <p class="item_handle">项目预算/项目规模:少量预算金额、中标金额未公开或为空的项目,将通过剑鱼标讯预测模型进行填补,可能会与实际项目预算、项目规模略有差距;</p>
+            <p class="item_handle">项目重复统计:一个招标项目可能同属于多个关键词组,故各关键词组的数据统计之和可能大于整体市场的统计。</p>
+          </div>
+        </div>
+      </div>
+      <div class="echartsView">
+        <!-- 本周新增招标项目数量 -->
+        <div class="newAdd_bid"></div>
+        <!-- 本周新增招标项目预算 -->
+        <div class="newAdd_bidBudget"></div>
+        <!-- 本周新增开标项目数量 -->
+        <div class="newAdd_bidOpen"></div>
+        <!-- 本周新增招标项目规模 -->
+        <div class="newAdd_scale"></div>
+        <!-- 项目金额排行榜 -->
+        <div class="proRank">
+          <div class="proRank_head">
+            项目金额排行榜
+          </div>
+          <div class="pro_ul">
+            <div class="pro_list" v-for="(item, index) in 2" :key="index">
+              <div class="pro_list_head">
+                <span class="list_index">{{index+1}}</span>
+                <span class="list_title">北京神州绿盟科技有限公司</span>
+              </div>
+              <div class="pru_unit">
+                <span class="unit_label">采购单位</span>
+                <span class="pur_unit_name">广东省高速公路有限公司深汕西分公司</span>
+              </div>
+              <div class="pru_unit">
+                <span class="unit_label">中标单位</span>
+                <span class="pur_unit_name">广东省高速公路有限公司深汕西分公司</span>
+              </div>
+              <div class="pro_amount">
+                <div class="pro_budget_money">
+                  <span class="unit_label">预算金额(亿)</span>
+                  <span class="budget_num">80.40</span>
+                </div>
+                <div class="pro_bid_money pro_budget_money">
+                  <span class="unit_label">中标金额(亿)</span>
+                  <span class="budget_num">80.40</span>
+                </div>
+              </div>
+            </div>
+            <div class="getMore" @click="getMore()">
+              查看更多
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 下周开标提醒 -->
+      <CompanyDetail title="下周开标提醒" :data="proInfor"></CompanyDetail>
+      <!-- 重点关注项目 -->
+      <CompanyDetail title="重点关注项目" :data="proKey"></CompanyDetail>
+      <!-- 重点关注企业 -->
+      <CompanyDetail title="重点关注企业" :data="comPanyInfor"></CompanyDetail>
+    </div>
+    <div class="page_week_artical"></div>
+  </div>
+</template>
+
+<script>
+
+import SelectMonth from '@/components/SelectMonth.vue'
+import CompanyDetail from '@/components/CompanyDetail.vue'
+export default {
+  name: 'page_week',
+  components: {
+    SelectMonth,
+    CompanyDetail
+  },
+  data () {
+    return {
+      isWeekIndex: 0,
+      proInfor: [
+        [
+          {
+            label: '开标时间',
+            content: '2020/6/29 10:30'
+          },
+          {
+            label: '省市',
+            content: '广西'
+          },
+          {
+            label: '项目名称',
+            content: '云之龙招标集团有限公司雁山校区新增监控设备'
+          },
+          {
+            label: '采购单位',
+            content: '桂林理工大学'
+          },
+          {
+            label: '项目预算(万)',
+            content: '398.63'
+          }
+        ]
+      ],
+      proKey: [
+        [
+          {
+            label: '项目名称',
+            content: '云之龙招标集团有限公司雁山校区新增监控设备'
+          },
+          {
+            label: '项目状态',
+            content: '预告'
+          },
+          {
+            label: '采购单位',
+            content: '桂林理工大学'
+          },
+          {
+            label: '项目预算(万)',
+            content: '398.63'
+          }
+        ]
+      ],
+      comPanyInfor: [
+        [
+          {
+            label: '企业名称',
+            content: '广州市乾润信息技术有限公司'
+          },
+          {
+            label: '注册省市',
+            content: '广西'
+          },
+          {
+            label: '中标项目',
+            content: '广州市轻工高级技工学校邮箱采购及综合数据服务平台优化升级项目'
+          },
+          {
+            label: '中标日期',
+            content: '2020/6/26'
+          },
+          {
+            label: '中标金额(万)',
+            content: '398.63'
+          }
+        ]
+      ]
+    }
+  },
+  created () {
+    this.getTimes()
+  },
+  methods: {
+    // 选择周报
+    selectWeek (data) {
+      this.isWeekIndex = data
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .page_week{
+    margin: 32px auto;
+    display: flex;
+    justify-content: space-between;
+    width: 1200px;
+    height: auto;
+    .page_week_main{
+      width: 920px;
+      height: auto;
+      .week_time{
+        padding-bottom: 24px;
+        width: 920px;
+        min-height: 349px;
+        opacity: 1;
+        background: #ffffff;
+        border-radius: 4px;
+        .putaway{
+          position: absolute;
+          right: 0;
+          bottom: 16px;
+          color: #2cb7ca;
+          cursor: pointer;
+          .put_text{
+            opacity: 1;
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 20px;
+          }
+          .put_icon{
+            margin-left: 4px;
+            font-size: 16px;
+          }
+        }
+        .setHeight{
+          height: 72px;
+          overflow: hidden;
+        }
+        .select_report{
+          margin: 24px auto;
+          display: flex;
+          justify-content: space-between;
+          align-content: space-between;
+          flex-wrap: wrap;
+          width: 840px;
+          height: 210px;
+          .week_report{
+            margin-bottom: 16px;
+            padding: 0 16px;
+            width: 412px;
+            opacity: 1;
+            background: #ffffff;
+            border: 1px solid #ececec;
+            border-radius: 5px;
+            cursor: pointer;
+            .week_report_main{
+              display: flex;
+              flex-direction: column;
+              .report_top{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: 47px;
+                border-bottom: 1px solid rgba(0,0,0,0.05);
+                .reoprt_time{
+                  display: flex;
+                  align-items: center;
+                  .week_text{
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    margin-right: 8px;
+                    width: 24px;
+                    height: 24px;
+                    opacity: 1;
+                    background: #ff9f40;
+                    border-radius: 50%;
+                    font-size: 13px;
+                    font-weight: 500;
+                    color: #ffffff;
+                  }
+                  .week_days{
+                    font-size: 15px;
+                    font-weight: 500;
+                    color: #171826;
+                  }
+                }
+                .repot_gettime{
+                  font-size: 13px;
+                  font-weight: 500;
+                  color: #9b9ca3;
+                  line-height: 20px;
+                }
+              }
+              .report_bot{
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                height: 48px;
+                .push_text{
+                  font-size: 15px;
+                  font-weight: 500;
+                  color: #5f5e64;
+                }
+                .push_num{
+                  font-size: 16px;
+                  font-weight: 500;
+                  color: #171826;
+                  line-height: 24px;
+                }
+                .el-icon-arrow-right{
+                  margin-left: 4px;
+                  font-size: 16px;
+                  color: #c0c4cc;
+                }
+              }
+            }
+          }
+          .weekActive{
+            border: 2px solid #2cb7ca;
+            border-radius: 6px;
+            box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.08);
+          }
+        }
+      }
+      .dataReport{
+        margin-top: 32px;
+        padding: 32px 40px;
+        width: 100%;
+        height: auto;
+        background: #ffffff;
+        border-radius: 4px;
+        .dataReport_main{
+          width: 100%;
+          .data_r_head{
+            display: flex;
+            align-items: flex-end;
+            .data_r_title{
+              height: 28px;
+              opacity: 1;
+              font-size: 18px;
+              font-weight: 400;
+              color: #1d1d1d;
+              line-height: 28px;
+            }
+            .data_r_week{
+              margin-left: 8px;
+              font-size: 12px;
+              color: #999999;
+              line-height: 20px;
+            }
+          }
+          .data_keys{
+            margin: 20px 0;
+            height: 24px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #1d1d1d;
+            line-height: 24px;
+          }
+          .data_line{
+            width: 840px;
+            height: 1px;
+            opacity: 1;
+            background: #ececec;
+          }
+          .data_item{
+            padding-top: 20px;
+            width: 100%;
+            font-size: 12px;
+            color: #999999;
+            line-height: 20px;
+          }
+        }
+      }
+      .echartsView{
+        margin-top: 16px;
+        padding: 0 40px;
+        width: 100%;
+        background: #ffffff;
+        .proRank{
+          padding: 32px 0;
+          width: 100%;
+          .pro_ul{
+            margin-top: 16px;
+            width: 100%;
+            .pro_list{
+              padding: 24px;
+              width: 840px;
+              opacity: 1;
+              background: #f5f6f7;
+              border-radius: 4px;
+              box-shadow: 0px -1px 0px 0px rgba(0,0,0,0.05) inset;
+              .pro_list_head{
+                display: flex;
+                align-items: center;
+                .list_index{
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
+                  width: 16px;
+                  height: 20px;
+                  background: #fb483d;
+                  border-radius: 2px;
+                  font-size: 13px;
+                  font-weight: 500;
+                  color: #ffffff;
+                }
+                .list_title{
+                  margin-left: 12px;
+                  font-size: 16px;
+                  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+                  font-weight: 400;
+                  color: #1d1d1d;
+                  line-height: 24px;
+                }
+              }
+              .unit_label{
+                font-size: 12px;
+                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+                font-weight: 400;
+                color: #999999;
+                line-height: 20px;
+              }
+              .pru_unit{
+                display: flex;
+                flex-direction: column;
+                margin-top: 12px;
+                .pur_unit_name{
+                  margin-top: 4px;
+                  font-size: 13px;
+                  color: #1d1d1d;
+                  line-height: 20px;
+                }
+              }
+              .pro_amount{
+                display: flex;
+                margin-top: 12px;
+                .pro_budget_money{
+                  display: flex;
+                  flex-direction: column;
+                  width: 155px;
+                  .budget_num{
+                    margin-top: 4px;
+                    font-size: 13px;
+                    color: #1d1d1d;
+                    line-height: 20px;
+                  }
+                }
+                .pro_bid_money{
+                  margin-left: 45px;
+                }
+              }
+            }
+            .getMore{
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              width: 100%;
+              height: 48px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #2cb7ca;
+              background: #f5f6f7;
+              cursor: pointer;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>